I'm building a website and have a content div inside the body with a grey border:
http://img399.imageshack.us/img399/4198/problemdisplaylh4.jpg
As you can see, it displays perfectly fine in firefox.
But in internet explorer...
http://img122.imageshack.us/img122/4030/ieproblemhk6.jpg
Heres the code for the #content div
#content { border: 4px solid grey; width: 90%; height: 500px; margin-top: 20px; margin-bottom: 20px; margin-left: auto; margin-right: auto; }
Heres the HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> </head> <body> <div id="content"> </body> </html>
Not including the menu, but it's irrelevant.
What happens when you run
What happens when you run that markup through the validator?
Well i can't because the
Well i can't because the code is not online yet
Strange_Paint wrote:Well i
Well i can't because the code is not online yet
Ever try clicking on those tabs on top of the validator?
<b>This document was
This document was successfully checked as HTML 4.01 Strict!
Strange_Paint wrote:
Heres the HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> </head> <body> <div id="content"> </body> </html>
Not including the menu, but it's irrelevant.
This document was successfully checked as HTML 4.01 Strict!
BS! What you posted up above doesn't validate.
Look, man. Just post your code. All of it. Not snippets. Nothing is irrelevant. I'll bet that the menu is the entire issue. Let me guess because that's all I can do, the menu is floated and not contained. IE gets it wrong.
Ok i will post all the code
Ok i will post all the code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="web.css"> </head> <body> <div id="content"> <ul class="solidblockmenu"> <li><a href="index.htm" class="current">Home</a></li> <li><a href="Donate.htm">Donate</a></li> <li><a href="Forums.php">Forums</a></li> <li><a href="Tools.htm">Tools</a></li> </ul> <br style="clear: left"></div> </body> </html>
#content { border: 4px solid grey; width: 90%; height: 500px; margin-top: 20px; margin-bottom: 20px; margin-left: auto; margin-right: auto; } .solidblockmenu{ margin: 0; padding: 0; float: left; font: bold 13px Arial; width: 100%; overflow: hidden; margin-bottom: 1em; border: 1px solid #625e00; border-width: 1px 0; background: black url(blockdefault.gif) center center repeat-x; } .solidblockmenu li{ display: inline; } .solidblockmenu li a{ float: left; color: white; padding: 9px 11px; text-decoration: none; border-right: 1px solid white; } .solidblockmenu li a:visited{ color: white; } .solidblockmenu li a:hover, .solidblockmenu li .current{ color: white; background: transparent url(blockactive.gif) center center repeat-x; }
Lets step back a bit and
Lets step back a bit and repeat the validation? Validate that complete markup document and fix the glaring error which Triumph has already alluded to, then your code will work as expected.
It's not a containment issue in this instance. your container has hasLayout triggered so will contain the floated children, modern browsers don't have a containment fix but the fixed height is masking that fact.
When i said i validated, i
When i said i validated, i mean't all my code..Like what i posted there + my meta description, keywords, and title.
I don't quite understand the glare issue you speak of, and i don't know how to validate CSS.
if you did indeed validate
if you did indeed validate the markup then the validator would have described the error. CSS validation is not the issue here.
Actually I owe you a slight
Actually I owe you a slight apology, the glaring error I perceived was due to the fact that I missed the closing div nestled after the br tag (not the best formatting approach)there was a an error though which you should have corrected in the missing title tag, but this does not cause the rendering issue; what however does cause a problem is the keyword grey as clearly FF will accept 'grey' or 'gray' IE doesn't and requires the American spelling!!! :curse: 'gray'
Again apologies for being tough on you as that took me a few minutes to puzzle out
Yep, 'gray' fixed the issue
Yep, 'gray' fixed the issue thanks. I never knew gray was ever spelt differently than grey. I also have to spell 'colour' as 'color' so yeah
Okay well i have another
Okay well i have another problem. I want to get a logo in the middle of the #content div, but a bit closer to the top than to the bottom. Everytime i try to do this it appears outside the #content div, i have no idea why?
.logo {
margin-top: 220px;
background: url(blahblah.png);
border: 2px solid black;
padding: 2px;
height: BLAH BLAHpx;
width: BLAH BLAHpx;
If the parent of that logo
If the parent of that logo has a fixed height then adding that much top margin will likely push the logo down and to the point where it overflows it's parents boundaries, you might want to change the fixed height (if that is the issue) to min-height and feed IE6 a separated filtered rule so that it sees fixed height as original (IE will expand a fixed height - incorrectly!)
Hugo, thanks for picking up
Hugo, thanks for picking up for me while I regenerated in my hypercube.
Ok how do i feed a
Ok how do i feed a sepereated filter rule or whatever lol? And i changed height to min-height and the problem still exists.
show us code or better still
show us code or better still the page uploaded to a server accessible online would be best.
That would be too hard. And
That would be too hard. And i already did post all the code. Anyway i got rid of it by taking away a that had a style of clear: left;
Cheers.
Quote:Ok how do i feed a
Ok how do i feed a sepereated filter rule or whatever lol?
You'll run into many times when you need to do this:
#somebox {
min-height: 666px;
}
* html #somebox {
height: 666px;
}
For IE6, height means "minimum height" due to expanding-box bug (I think). So that's how you feed it: use the star hack.