5 replies [Last post]
cyberdread
Offline
Regular
Last seen: 12 years 8 weeks ago
Joined: 2005-10-26
Posts: 23
Points: 0

Following your advice I am giving relative positioning a go, but I cant get some things to work, for instance, I have a 1 pixel gap between elements that shouldnt be there in mozilla and netscape, works fine in IE.
here is the code:

body {
margin:3px;
color: #ffffff;
background: #ffffff;
font-size: 20%;
}

#header {
position:relative;
display:block;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
}

#menubg {
position:relative;
display:inline;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
}

#mainbg {
position:relative;
display:inline;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
}

and here is the link so you can see the gap for yourself:
http://xera.atspace.com/
its the gap between the orange and blue elements below the banner at the top.
So please enlighten me, whats wrong with my code?
Nick

Jhorra
Offline
Enthusiast
Last seen: 11 years 49 weeks ago
Joined: 2004-06-04
Posts: 57
Points: 0

1 pixel gap that shouldnt be there.

It would help to see the code on the page to. My guess is it could be the IE white space bug. Put both images on the same line and remove any white space between them.

cyberdread
Offline
Regular
Last seen: 12 years 8 weeks ago
Joined: 2005-10-26
Posts: 23
Points: 0

1 pixel gap that shouldnt be there.

here is the html 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">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="layout1.css" type="text/css" />
<title>xera formation</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>

<body>

<div id="header"><img src="multif/v1.jpg" /></div>
<div id="menubg"><img src="multif/v2h1.jpg" /></div>
<div id="mainbg"><img src="multif/v2h2l2.jpg" /></div>


</body>
</html>

its not the ie whitespace bug, it is showing fine in IE, there is whitespace in netscape and mozilla that shouldnt be there ( 1 pixel)

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 9 hours 8 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

1 pixel gap that shouldnt be there.

Firefox is displaying it quite correctly. Since both divs are {display: inline;} the white space between them is rendered as, um, whitespace.

If you remove the inline rules, and make the #menubg {float: left;}, all is well.

You could do this, as well, but the inline approach is probably fragile in the long run, anyway.

 
<div id="header"><img src="multif/v1.jpg" /></div> 
<div id="menubg"><img src="multif/v2h1.jpg" /></div><div id="mainbg"><img src="multif/v2h2l2.jpg" /></div>
Notice the eliminated w-s.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

cyberdread
Offline
Regular
Last seen: 12 years 8 weeks ago
Joined: 2005-10-26
Posts: 23
Points: 0

1 pixel gap that shouldnt be there.

thanks a lot. I didnt know mozilla was affected by whitespace between elements, isnt that meant to be an IE bug?
Its working now anyway thanks.
Ill give floats a go too now, dont know how to use float yet so time to experiment a little.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 9 hours 8 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

1 pixel gap that shouldnt be there.

This w-s, specific to the inline model, is correct. It's the same as if in some text you hit [enter] in the middle of a word, brow\nser, where the \n is a newline. Give it a try.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.