I threw together a temporary page to put on my website (Please do not take my work to use as your own. Thanks!). The issue I am having is getting it to appear the same on the major browsers: IE, FF and GC. It has been validated already. Do you see anything that I am missing? I have this feeling there is. The other day I accidently put html/css instead of text/css and it drove me mad. lol Sometimes we tend to overlook simple mistakes. Thank you for your extra set of eyes gentlemen or ladies!
One thing I noticed is your IMG width=“…” value is wrong you don’t use px on that markup attribute value - the validator might not catch that one. Also the semantics are a little peculiar such as skipping headings, etc.
Apart from the fact that the image doesn’t display when I run the page locally because you haven’t given a full URL, I can’t see any noticeable differences in IE8, Fx or Chrome. What problems have you found?
When I ran it in iexplorer off my computer it was coming out fine. As soon as I put in on my server it goes haywire. Switching to em helped some with consistancy across the board. I have made several tweaks. I am hesitant to use a conditional stylesheet when it the cause could be my CMS (ModX Revolution). :injured: Anyone else have experience with ModX Rev.? This is irritating. The whole point of using it was to save time. :sick: Thank you guys for your quick responses!
@Stevie D The portrait is located on my server in my ftp. In IE8-9 the padding or margins are, as usual, messed up. I rewrote the sheet seen above along with adding some other elements. Adding a conditional markup might fix it. I assume coding while being drowsy does not mix too well. lol I do not want to post the new one to avoid certain people from copying it. You fellows could throw that together in no time, so I doubt you would bother anyhow.
Can you at least post a screen-shot of the problem, to let us see what you’re seeing? Which margins/padding are causing the problems? In what way are they “messed up”?
@TechnoBear Yea, I will post a picture as an example in a little bit. I have been really busy doing other things today and have not finished tweaking it. I[/I]
It went from bad to worse. This fellow has pretty much gave up. I have been trying everything an amateur can do to fix it. What I am trying to do is obviously not working. :x
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--COPYRIGHT (C) DATE HERE. NAME HERE.-->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
LINGUA LATINA
</title>
<style type="text/css">
body
{
position: relative;
font-size: 62%;
margin: 0;
padding: 1em 0em 0em 0em;
text-align: center;
background-color: rgb(255,255,255);
background-image: url('/media/ele/bgb.gif');
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
}
div#o
{
position: relative;
width: 80em;
padding: 0em;
border: 0em;
text-align: left;
margin: 0 auto;
}
div#b
{
position: inherit;
margin: 2.5em 0em 0em 0em;
height: 100em;
border: 0.7em solid rgb(0,0,0);
outline: rgb(255,0,0) solid 2.5em;
background-color: rgb(255,255,255);
}
div#t
{
position: inherit;
}
table#spl, tr#spl
{
position: absolute;
top: 0em;
left: 30em;
bottom: 2.5em;
z-index: 3;
}
table#h, tr#h
{
position: inherit;
padding: 4em 0em;
margin: 0 auto;
display: block;
text-align: center;
z-index: 2;
}
div#m
{
position: inherit;
padding: 3em 2.5em 0em 2.5em;
text-align: justify;
font: normal normal 300 2.0em "Times New Roman", Times, sans-serif;
}
table#p, tr#p
{
position: inherit;
border: 0em;
margin: 0em 1em 0.2em 0em;
vertical-align: top;
float: left;
}
p#sp
{
position: inherit;
padding-top: 1em;
}
div#f
{
position: inherit;
text-align: right;
font: normal small-caps 400 1.2em/2em "Arial", Helvetica, sans-serif;
color: rgb(0,0,0);
z-index: 3;
}
</style>
</head>
<body>
<div id="o">
<div id="b">
<div id="t">
<table id="spl">
<tr id="spl">
<td>
<img alt="DUMMY ELEMENT" src="/media/ele/cs.png" height="327" width="245">
</td>
</tr>
</table>
<table id="h">
<tr id="h">
<td>
<img alt="DUMMY ELEMENT" src="/media/ele/h.png" width="388" height="71">
</td>
</tr>
</table>
</div>
<div id="m">
<table id="p">
<tr id="p">
<td>
<img style="border: 0.25em solid rgb(0,0,0); outline: rgb(255,255,255) solid 0.2em;" alt="DUMMY ELEMENT" src="media/meweb.jpg" width="250">
</td>
</tr>
</table>
<p id="sp">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</div>
</div>
<div id="f">
COPYRIGHT © 2011 DATE HERE. NAME HERE. ___ RIGHTS RESERVED.
</div>
</div>
</body>
</html>
You cannot have duplicated ID values in the markup and attempting positioning with TABLE isn’t an ideal situation either I suspect the duplicated ID values are causing some tiny shift. It looks like a cross over of two different coding styles that won’t play nicely together.
Thanks bud for your insight! I knew .class is used for multiple items and #id is used for single items, but I somehow missed it. Table has been working terribly for positioning. lol I have been gradually teaching myself coding for about a year now to expand my computer knowledge. As a do-it-yourself guy, I would much rather build a site myself than have someone else do it for me. Agreed? I wonder why there is not a more universal standard across different browsers? :-/ Each one has some uniqueness to them.
Also the semantics are a little peculiar such as skipping headings, etc.
:x
I knew .class is used for multiple items and