IE hack - Height difference between IE and Firefox

warrenj · June 7, 2011, 7:21am

Hi,

I have absolutely no idea how to hack IE. My site looks like it should in Firefox, but my navigation bar in IE is short by 7px. How do I fix it.

Warren and Watters - Hartford Lane Studio
The part that needs to be fixed is the div id “cdpic” below at end.

I have the site set for Firefox now.

Thanks for any help.

Jim



#wrap {
  margin: 0 auto;
  width: 750px;
}
body {
  background-color: #000000;
  color: #ffffff;
  margin-top: 20px;
}
h1,ul,li {
  margin: 0px;
  padding: 0px;
}
h1 {
  font-family: "times new roman", times, serif;
  font-size: 4.00em;
  padding-left: 65px;
}
#header {
  background-color: #000000;
  border: 4px outset;
  border-color: #43616b;
  color: #ffffff;                             
  padding: 7px 0 0 0;
  height: 85px;
  width: 682px;
}
#nav {
  background: url(images/wandw.jpg) no-repeat;
  height: 359px;
  width: 690px;
}
ul#navleft {
  list-style: none;
  width: 143px;
}
  #navleft li {
  border: 4px outset #43616b;
}
ul#navleft li a:link, ul#navleft li a:visited {
  background-color: #000000;
  color: #ffffff;
  display: block;
  font: 9pt Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
  text-decoration: none;
  width: 100%;
}
ul#navleft li a:hover {
  background-color: #5c6f90;
  color: #000000;
}
#cdpict {
  color: #ffffff;
  height: 243px;
  margin: 0px;
  padding: 0px;
  width: 135px;
  text-align: center;
}
#cdpict {
  background-color: #000000;
  border: 4px outset #43616b;
}
#update {
  background-color: #000000;
  color: #ffffff;
  font-family: "times new roman", times, serif;
  font-size: 10px;
  text-align: center;
}

Stomme_poes · June 7, 2011, 7:56am

Check your HTML:


        <div id="cdpict">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/frontcov.jpg" style="margin: 10px 17px 0 0; width: 95px; height: 95px;" alt="Lisa's soon coming ten song CD">
            <span style="text-align: center;">Coming Soon!<br />
            I'm Coming Home<br />
           [b] Music CD</span[/b]
        </div>

(I don’t think this is actually affecting you visually tho)

Also, in IE7 I’m seeing some whitespace errors in the menu (I believe because you’ve set the anchors to display: block but didn’t explicitly set a state for the li’s, which you shouldn’t have to…).
For me, in IE7, the left box is taller than in Firefox, not shorter. Are those two boxes (left side and image) supposed to be the same height? They aren’t in any browser I check.

Anyway I get around whitespace bugs in IE6 and 7 by stating the li’s as display: block or something (again, they’re display: block by default but IE seems to confuse display: block and display: list-item, which you’ve removed because you don’t want bullets) and I float the anchors (but still state them as 100% wide… though then don’t set any padding or borders on them if you use that. Otherwise, set a px width).

Hm, I might be confusing bugs here… floating the anchors will remove whitespace bugs, but I might be thinking of Staircase bug for the display setting of the li’s. Start with just floating the anchors and see if you need to set display on the li’s… if not, leave it off, less code.


#navleft li {
  display: block;/*you can check if you need this for IE; if not, remove it, it's *supposed* to be default*/
  border: 4px outset #43616b;
}
#navleft a {
background-color: #000;
color: #fff;
float: left;
font: 9pt Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
text-decoration: none;
width: 100%;
}
#navleft a:focus, #navleft a:hover, #navleft a:active  {
background-color: #5c6f90;
color: #000;
}

Don’t leave keyboarders in the dark; use :focus styles. :active is mostly just for IE6 since it thinks :active == :focus. IE7 is a lost cause unless you Javascript it.
If you’re not supporting IE6, leave the :active off.

PaulOB · June 7, 2011, 11:56am

I prefer to float the list elements and anchors as that always cures the white space bugs in IE but means that you have to supply widths which is a drawback.

I’d do something like this:


ul#navleft {
    list-style: none;
    width: 143px;              /*175*/
}
#navleft li {
    border: 4px outset #43616b;
    float:left;
    width:135px;
    clear:left;
}
ul#navleft a {
    background-color: #000;
    color: #fff;
    font: 9pt Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;         /*10pt/1.5*/
    text-decoration: none;
    width: 100%;
    text-indent:15px;
    text-transform:uppercase;
    float:left;
}
#navleft a:focus, #navleft a:hover, #navleft a:active {
    background-color: #5c6f90;
    color: #000;
}

Don’t use non breaking spaces to make space:) They are meant to hold elements together without breaking (i.e. a non-breaking space). You can use text-indent to move the text and then text-transform to make it capital.


<ul id="navleft">
            <li><a href="htmfiles/about.htm">About W&amp;W</a></li>
            <li><a href="htmfiles/disc.htm">Discography</a></li>
            <li><a href="htmfiles/photos.htm">Photos</a></li>
            <li><a href="htmfiles/contact.htm">Contacts</a></li>
            <li><a href="htmfiles/credits.htm">Credits</a></li>
        </ul>

system · June 7, 2011, 3:29pm

As the others have implied, the HTML really is a lot of your problem here, though the CSS isn’t a real winner either.

Starting in the HTML, I would suggest the following:

use a MODERN doctype instead of being in “transition” from 1997 to 1998. Tranny doctypes are for supporting old/outdated/half-assed coding techniques, not for building new pages.
there’s an attribute for LINK called “media”, you should use one to target just “screen” so you aren’t trying to send screen styling to all devices.
Ease up on the div, and try to be a bit more descriptive with them. “wrap” is pretty vague, usually there are tons of wrappers on a page… I think div#header, div#nav AND div#cdPict (though not sure on the last) are unnecessary elements.
don’t use non-breaking spaces to do padding’s job!
BMP’s have no business being used on a website – EVER.
names like “navLeft” are also presentational – if you are saying how things look instead of what things are, you’re probably writing your HTML wrong!
.htm is like going for a trip in the wayback machine to 1995… putting all your HTML files in a subdirectory instead of using relational links down-tree? Even worse.
Not sure if the page you linked to is a placeholder or WIP, but given all the subpages have different layouts is not a good thing. Pick a layout, stick with it.
if you are resorting to the style attribute, 99% of the time you’re doing something wrong as well.
as cute as the picture is, if that’s going to be the entire content then it’s just a glorified splash page, a really bad concept from a usability standpoint that also went the way of the dodo a decade ago. (except for the nimrods still building sites in nothing but flash)
your use of dynamic fonts makes the H1 blow down over the content below it on large font/120dpi machines.
you aren’t doing anything fancy enough that it should even NEED IE specific hacks.
I advise AGAINST serif fonts on websites since with the low dot pitch of most screen devices they are very difficult to read.
named border styles other than “solid” are unpredictable cross browser since the specification does not explicitly state how they should be used, as such I would NOT declare an “outset” border on a website.

So the first order of business is cleaning up the HTML.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Warren and Watters - Hartford Lane Studio
</title>

</head><body>

<div id="pageWrapper">
	<h1>Warren and Watters</h1>
	
	<div id="sideBar">
	
		<ul id="mainMenu">
			<li><a href="about.htm">ABOUT W&W</a></li>
			<li><a href="disc.htm">DISCOGRAPHY</a></li>
			<li><a href="photos.htm">PHOTOS</a></li>
			<li><a href="contact.htm">CONTACTS</a></li>
			<li><a href="credits.htm">CREDITS</a></li>
		</ul>
		
		<img
			src="http://www.sitepoint.com/forums/images/frontcov.jpg"
			width="95" height="95"
			alt="Lisa's soon coming ten song CD"
			class="plate"
		/><br />
		Coming Soon!<br />
		I'm Coming Home<br />
		Music CD
		
	<!-- #sideBar --></div>
	 
	<div id="content">
		I assume you're going to have content here?
	</div>
	
	<div id="footer">
		&copy; Warren and Watters / Hartford Lane Studio 2011
	<!-- #footer --></div>
	
<!-- #pageWrapper --></div>

</body></html>

Gimme a couple minutes and I’ll belt out the CSS to make that work.

system · June 7, 2011, 4:01pm

Made a few changes to the HTML for the layout, but nothing major. I REALLY would swing a giant axe at that background image in the ‘content’ area and get some content in there instead… maybe work a picture of them into the background on the H1 or something.

But this is what I came up with:

Warren and Watters - Hartford Lane Studio

As with all my examples the directory:
Index of /for_others/warrenJ

is open for easy access to the bits and pieces. I got aggressive with the image optimization to get it under the ‘70k’ ideal target limit I set for a web page.

All new markup, all new CSS. Tested working in every browser since IE 5, with not a hack to be found.

warrenj · June 7, 2011, 8:53pm

Thank you SO much everybody for the time spent on my behalf. I appreciate it. My daughter will be pleased.

Again, thanks.