1 reply [Last post]
L0LKTHXBYE
L0LKTHXBYE's picture
Offline
Enthusiast
Nederland
Last seen: 11 years 33 weeks ago
Nederland
Timezone: GMT+2
Joined: 2009-06-11
Posts: 98
Points: 0

Hallo monks and gurus,

I am getting the IE whitespace bug under an image who (so far) needs to be set to display: block in order to clear some floats above it. I have considered leaving it inline and clearfixing the floats above it but that's twice the code, if I can avoid it.

Here's the relevant chunk:

    <div id="header">
      <p id="sitenaam">SITENAME<span>.nl</span> <small>Kleding voor het hele gezin</small><a href="index.php" title="Terug naar Home pagina"> </a></p>
      <p id="bericht"><span>Geen verzendkosten</span> op iedere bestelling in Nederland! <em>Ruilen altijd mogelijk.</em></p>
      <ul id="klantnav">
        <li><a href="index.php?p=login">Log in</a></li>
        <li><a href="index.php?p=paskamer">Mijn paskamer</a></li>
      </ul>
      <img src="img/g-starheader1.jpg" width="900" height="125" alt="G-star via Sitename.nl" />
    </div>

The p called sitenaam is floated left, the klantnav is floated right. The image, when there's an image there, is currently trying to clear those floats... now when there's an image it doesn't need to, because its width is 100% wide, but with images off, the alt text dribbles everywhere and looks stupid (still readable though).

#header {
  min-height: 190px;
  padding: 15px 0 0;
  color: #f9f9f9;
  font-weight: bold;
  background-color: #4c6e83;
}
* html #header {height: 190px;}
 
#sitenaam {
  float: left;
  display: inline; /*IE6*/  (no width)
  margin: 6px 0 20px 80px;
  font-size: 1.5em;
  text-indent: -5px;
  position: relative;
}
	#sitenaam span {
	  font-size: .5em;
	  font-weight: normal;
	}
	#sitenaam small {
	  display: block;
	  font-size: .5em;
	  margin-top: -4px;
	  text-indent: -5px;
	}
	#sitenaam a {
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	}
		#sitenaam:hover, #footer a:focus, #footer a:hover, #footer a:active {
		  color: #a8b9c4;
		}
	#sitenaam:hover small {
	  color: #f9f9f9;
	}
 
#bericht {
  font-size: .7em; 
  padding-left: 61%;
}
	#bericht span {
	  text-decoration: underline;
	}
	#bericht em {
	  display: block;
	  text-decoration: underline;
	  font-style: normal;
	}
 
#klantnav {
  float: right;
  margin: 10px 15px 0 0;
  overflow: hidden;
}
	#klantnav li {
	  display: inline;
	}
	#klantnav a {
	  float: right;
	  padding: 0 .5em;
	  color: #f9f9f9;
	  text-align: center;
	  font-size: .72em;
	  text-decoration: none;
	}
		#klantnav a:focus, #klantnav a:hover, #klantnav a:active {
		  color: #a8b9c4;
		}
 
#header img {
  clear: both;
  display: block;<-- I've had this out for a while now
  text-align: center; /*alt text styling*/
  font-size: 2em; /*alt text styling*/
  line-height: 90px; /*alt text styling*/
  background: url(img/default.jpg) 0 0 no-repeat; /*aanpassen per seizoen*/
  border-top: 1px solid #000;
}

I can fix this in IE and leave other browsers ok by changing the HTML to this:

        <li><a href="index.php?p=paskamer">Mijn paskamer</a></li>
      </ul><img src="img/leeheader2.jpg" width="900" height="125" alt="Lee kleding bij sitename.nl" /
    ></div>

This is not something I'd like to demand of the guy who's templating this. I'm lucky if I even get regular indentation, let alone sepcific chunks with no whitespace.

I'm looking for a CSS solution, which likely I'll need to hide behind * and *+ hacks, since I'm thinking something like Gary's negative letter-spacing? or whatever it was, and I don't want anyone else to see it and act all crazy.

page with whitespace: stommepoes.nl/Jeansselling/jeansgstar.html
page without whitespace: stommepoes.nl/Jeansselling/jeanslee.html

thx

L0LKTHXBYE
L0LKTHXBYE's picture
Offline
Enthusiast
Nederland
Last seen: 11 years 33 weeks ago
Nederland
Timezone: GMT+2
Joined: 2009-06-11
Posts: 98
Points: 0

Bah. As usual, I'm being

Bah. As usual, I'm being stupid, and sticking too close to the nasty design and template (not mine, ew). I should kick the img out of the header entirely, close the header around the floats, and be done with it. I don't necessarily like having an inline sibling with large blocks like that, but it's fine and works and doesn't break any cosmic laws or make bad karma.