3 replies [Last post]
florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 12 years 46 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

hello,

i have just rewritten my band's website in xhtml 1.0 strict.

however, there seems to be a small display problem in ie : i have a floating menu div to the left of my content div, and it seems that this menu div causes the text inside the content div to indent by 1 or 2 pixels to the right. i dont't get it !

here's a screenshot of the problem :

see how the top 3 images are slightly further to the right than the ones beneath them ?

check out the site at http://sadmusic.free.fr/ or directly jump to http://sadmusic.free.fr/links which is the page where the problem is most visible (though it's on all pages)

here's the page code :

<!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>
<title>s.a.d - links</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="en" />
<link rel="stylesheet" type="text/css" media="screen" href="sadstyle.css" />
</head>

<body>

<div id="main">

<h1 id="header">s.a.d - links</h1>

<ul id="menu">
	<li><a href="biography.html">biography</a></li>
	<li><a href="lineup.html"><span class="xxxs">v</span> line-up <span class="xxxs">v</span></a></li>
	<li><a href="music.html">music</a></li>
	<li><a href="photos_en.html">photos</a></li>
	<li><a href="guest_en.html">guestbook</a></li>
	<li>links</li>
	<li></li>
	<li><a href="liens.html">fran&ccedil;ais</a></li>
</ul>

<div id="content">
	<ul id="links">
		<li><img src="images/l_chokebore.jpg" width="50" height="50" alt="Chokebore" /> <a href="http://www.chokebore.net/">Chokebore</a><br /><br /></li>
		<li><img src="images/l_exsonvaldes.jpg" width="50" height="50" alt="Exsonvaldes" /> <a href="http://www.exsonvaldes.net/">Exsonvaldes</a><br /><br /></li>
		<li><img src="images/l_grandaddy.jpg" width="50" height="50" alt="Grandaddy" /> <a href="http://grandaddylandscape.com/">Grandaddy</a><br /><br /></li>
		<li><img src="images/l_mogwai.jpg" width="50" height="50" alt="Mogwa&iuml;" /> <a href="http://www.mogwai.co.uk/">Mogwa&iuml;</a><br /><br /></li>
		<li><img src="images/l_pinback.jpg" width="50" height="50" alt="Pinback" /> <a href="http://www.pinback.com/">Pinback</a><br /><br /></li>
		<li><img src="images/l_sourmilk.jpg" width="50" height="50" alt="Sour Milk" /> <a href="http://sourmilk.free.fr/">Sour Milk</a><br /><br /></li>
		<li><img src="images/l_sirmurdock.jpg" width="50" height="37" alt="Sir Murdock" /> <a href="http://pageperso.aol.fr/thelastplayboy/mapage/musique.html">Sir Murdock</a><br /><br /></li>
		<li><img src="images/l_buddyhead.jpg" width="50" height="50" alt="Buddyhead" /> <a href="http://www.buddyhead.com/">Buddyhead</a><br /><br /></li>
		<li><img src="images/l_downhill911.jpg" width="50" height="50" alt="Downhill 911" /> <a href="http://www.downhill911.com/">Downhill 911</a></li>
	</ul>
</div>

<div id="footer">design : florent - <a href="http://validator.w3.org/check/referer">valid xhtml 1.0</a> &amp; <a href="http://jigsaw.w3.org/css-validator/check/referer">valid css</a></div>

</div>

</body>
</html>

and the stylesheet code :

body {
font-family : verdana, arial, sans-serif;
font-size : 12px;
color : #000000;
background : #c1d5ef;
text-align : center;
margin : 10px;
padding : 0;
}
#main {
margin : 0 auto;
width : 600px;
}
#header {
border : 1px solid #000000;
background : #b0c4de;
font-family : times new roman, serif;
font-size : 18px;
font-weight : bold;
font-style : oblique;
margin : 0 0 0 125px;
padding : 5px;
text-align : left;
}
#menu {
float: left;
width : 100px;
border : 1px solid #000000;
background : #b0c4de;
font-size : 10px;
font-weight : bold;
margin : 10px 0;
padding : 5px;
text-align : center;
line-height : 20px;
}
#submenu {
border : 1px solid #000000;
margin : 0;
}
#content {
border : 1px solid #000000;
background : #b0c4de;
min-height : 100px;
margin : 10px 0 10px 125px;
padding : 5px;
text-align : justify;
}
#indeximg {
border : 1px solid #000000;
background : #b0c4de;
margin : 10px 0 10px 125px;
padding : 5px;
text-align : center;
}
#gallery {
border : 1px solid #000000;
background : #b0c4de;
min-height : 100px;
margin : 10px 0 10px 125px;
padding : 5px;
text-align : center;
}
#links {
margin : 0;
}
#footer {
border : 1px solid #000000;
background : #b0c4de;
font-size : 10px;
margin : 0 0 0 125px;
padding : 5px;
text-align : center;
}
a, a:visited {
color : #ffffff;
text-decoration : none;
}
a:active, a:hover {
color : #ffffff;
border-top : 1px solid;
border-bottom : 1px solid;
text-decoration : none;
}
#menu a:active, #menu a:hover {
background : #ffffff;
border : 2px solid #ffffff;
color : #b0c4de;
text-decoration : none;
}
#gallery img {
border : 1px solid #ffffff;
margin : 10px;
vertical-align : middle;
}
#links li {
margin : 0;
}
#links img {
border : 1px solid #ffffff;
vertical-align : middle;
}
img {
border : 0;
}
.lfloat {
float : left;
margin : 0 10px 0 0;
}
.rfloat {
float : right;
margin : 0 0 0 10px;
}
ul {
list-style : none;
}
.l {
font-size : 18px;
}
.m {
font-size : 16px;
}
.s {
font-size : 14px;
}
.xs {
font-size : 12px;
}
.xxs {
font-size : 10px;
}
.xxxs {
font-size : 5px;
}
.center {
text-align : center;
}
.mt0 {
margin-top : 0;
}
.mb0 {
margin-bottom : 0;
}

thanks in advance for any help !

I'm a perfectionist
and perfect is a skinned knee

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 11 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

a display bug with ie...

Hi florent,
Here's an article that explains your problem.
http://www.positioniseverything.net/explorer/threepxtest.html

Hope that helps.

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 12 years 46 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

a display bug with ie...

thanks tony ! Tongue

so let me get this right... there is no way out of this ! Sad

too bad... i wonder how i didn't come across this earlier. nevermind... :roll:

I'm a perfectionist
and perfect is a skinned knee

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 11 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

a display bug with ie...

Hi florent,
At the end of that article a solution has now been added unfortunately its not a simple one.