White lines in between images With DIV

liunx · Jan 11, 2008

Hi all

I am having a problem with some images in a frame. I am still learning to use DIV, but I could very easly do it all in tables.

The problem is the images are not side by side like they are suppose to and I get white vertical line down the middle, and a margin that will not go away.

Here is my CSS Code:

body {background: #FFFFFF;
color: #000000
margin: 0px;
padding: 0px;
}

h1 {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
}

h2 {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
}

div { padding: 0px;
width: 75%;
direction: ltr;
border: 0px;
border-spacing: 0px;
position: relative;
border: none;
vertical-align: bottom;
text-align: left;
clear: none;
}

.divedge {float:left;
height: 100%;
width: 14px;
background-image: url(Images/Frame/edge.gif);
repeat: y;
clear: left;
z-index: 2;
}

.divnavbuttons {background-image: url(Images/Frame/menu3.gif);
width: 146px;
repeat: y;
height: 100%;
z-index: 2;
}

img{vertical-align: bottom;
border: 0px;
}

.imgnavbuttons {height: 26px;
width: 146px;
}

.imgedge {height: 100%;
width: 14px;
}

Here is my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html lang="en">

<head>
<title>
</title>
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"Stylesheet.css" type="text/css">
</head>

<body>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/Frame/MBEC_Logo.gif" alt="Macleay Business Enterprise Center">
<br />
<div class= "divedge">

<img class="imgedge"
src=http://www.webdeveloper.com/forum/archive/index.php/"Images/Frame/edge.gif">

</div>

<div class= "divnavbuttons">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.hastingsbec.com.au/aboutus/aboutus.html" target=mainFrame>
<img class="imgnavbuttons"
alt="About Us Button"
src=http://www.webdeveloper.com/forum/archive/index.php/"Images/Frame/butaboutus.gif">
</a><br />

<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.hastingsbec.com.au/news/news.html" target=mainFrame>
<img
class="imgnavbuttons"
alt=News
src=http://www.webdeveloper.com/forum/archive/index.php/"Images/Frame/butnews.gif">
</a><br />

<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.hastingsbec.com.au/resources/resources.html"
target=mainFrame>

<img
class="imgnavbuttons"
alt=Resources
src=http://www.webdeveloper.com/forum/archive/index.php/"Images/Frame/butresources.gif">
</a><br />

<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.hastingsbec.com.au/membership/membership.html"
target=mainFrame>
<img
class="imgnavbuttons"
alt=Membership
src=http://www.webdeveloper.com/forum/archive/index.php/"Images/Frame/butmembership.gif">
</a><br />

<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.hastingsbec.com.au/contactus/contactus.html"
target=mainFrame>

<img
class="imgnavbuttons"
alt="Contact Us"
src=http://www.webdeveloper.com/forum/archive/index.php/"Images/Frame/butcontactus.gif">
</a><br />
</div>

</body>
</html>

_____________________________________________

I have spent a whole day on this and the padding is not changing any thing nor is the margins.

every thing else is ok
I have posted the website so you can have a look

Thanks in advance!!!
scottTry changing the code to this:

.imgnavbuttons {
height: 26px;
width: 146px;
position: absolute;
top: 173px;
}

.divnavbuttons { background-image: url(Images/Frame/menu3.gif);
width: 146px;
repeat: y;
height: 100%;
position: absolute;
left: 14px;
top: 152px;
}thanks claire, I'll try that when I get back in the office on wednesday.

White lines in between images With DIV

liunx

Guest