Hello Guys,
Please pull up http://www.exithome.rdeskwebsites.com/ in IE7 and you will see once you hover over the top nav buttons you will see the extra space at the bottom
I’ve also attached some screen shots of FF vs IE7
Thanks
Hello Guys,
Please pull up http://www.exithome.rdeskwebsites.com/ in IE7 and you will see once you hover over the top nav buttons you will see the extra space at the bottom
I’ve also attached some screen shots of FF vs IE7
Thanks
You need to give your page a proper doctype, you have all versions of IE in quirks mode right now.
Sorry I should of put that I can’t edit that portion of the site in my post
This is a template driven site and I can edit the head or place a DOCTYPE where it should be
Well then then you are honestly SOL
I assume you meant to say you can’t?
RyanReese for the most part hit it on the head - you are SOL so far as the existing CSS is concerned - BUT…
The only thing screwing you from being in quirks mode is the use of padding and height at the same time… I still code for IE 5.x support so I know the simple rule of handling that
NEVER declare height the same time as padding or border… Since all your elements are only one line high, the solution is to set it so that your line-height and padding equal your total desired height.
The CSS for that menu really is a train wreck - I’d have to throw it out and start over to try and fix it - including taking an axe to the stupid javascripted animation, but it’s certainly possible to fix it.
Though it’s odd, I can’t actually find the height being set anywhere - which is what SHOULD be causing that - aha!!! I also don’t see line-height being set anywhere… Well there’s your problem.
NEVER trust the default line-height cross browser. If you change your font size, ALWAYS set the line height the same way.
under .ddsmoothmenu change this:
font:bold 20px “trebuchet ms”;
to this:
font:bold 20px/26px “trebuchet ms”,helvetica,sans-serif;
That way the 26px line-height will be present in all browsers. Not 100% certain that’s your problem, but it’s the most likely culprit as without it god only knows what IE is setting the line-height to. Line-height inheritance even in standards mode and standards compliant browsers can really mess you up. See the example near the bottom of my font comparison page:
http://battletech.hopto.org/html_tutorials/fontCompare/template.html
Which shows how two lines with the same line-height declared can end up different sizes!
That javascripted menu could also be a contributing factor, though that’s unlikely. I’d scrap that for a conventional CSS menu, then only throw scripting (like PeterNed’s hoverAnywhere) at IE6/earlier.
Really though if you cannot set the doctype, it might be time to pitch the whole thing and start over from scratch since the 69 validation errors means you have gibberish, not HTML - and the 31k of markup to deliver 3.4k of plaintext and four content images is a pretty sure indication there’s a heck of a lot wrong in there. (since that should only take MAYBE 10k of markup)
A doctype fixes it :).
THe problem is the bottom padding is going through the anchor to create that space.
You could fix this by removing dispaly:block that you set on hover for the span (your CSS file is so messy btw)
You’d have to do some aesthetical changes to the menu to get this working as of now, aka you’d have to move teh image set on the anchor to the <li>, and move the span image to the <a>.
You could also probably remove the span now :). Also set display:inline; on the <li>'s in that menu :).
Read thread. OP says he can’t… Which means working WITH the broken box model… Which oddly is NOT as hard as people make it out to be if you follow one simple rule - never declare width and height the same time as padding/border… Though there IS no height declared and that means the doctype does NOT fix it. (tested here using IE8’s developer tools)… which is why I’m thinking line-height inheritance issue.
the inline appears to be a double margin fix (I’m guessing) since if you start up firebug, you’ll see the LI are also FLOATING. This is probably something to do with his javascripted (ick) menu.
Did I say I didn’t know that?
Which means working WITH the broken box model… Which oddly is NOT as hard as people make it out to be if you follow one simple rule - never declare width and height the same time as padding/border… Though there IS no height declared and that means the doctype does NOT fix it. (tested here using IE8’s developer tools)… which is why I’m thinking line-height inheritance issue.
You can declare them, just make sure that you update teh heights/widths because the broken box model does it differently (aka hacks or CCs)
Line height isn’t the issue. I used to code for IE5 quite extensively, I know it just as wel as any other browser (I am a bit out of practice though since this forum doesn’t have IE5 questions)
the inline appears to be a double margin fix (I’m guessing) since if you start up firebug, you’ll see the LI are also FLOATING. This is probably something to do with his javascripted (ick) menu.
Yes it’s the double float margin bug fix, as I mentioned to him (which he implimented before your reply).