PDA

View Full Version : css help debugging



esthera
Apr 11th, 2010, 01:02 PM
http://www.awebforyou.com/test/

my yellow bar is supposed to be height 46 so why are the images off?
why are the input boxes down?

also in ie the view cart and checkout are being pushed down and making it display wrong

can anyone point me to what i did wrong?

Dormilich
Apr 12th, 2010, 12:33 PM
I think it’s a matter of how inline elements are treated in CSS. mind that some elements contain a border, which doesn’t count for element width/height.

besides, the image is only 42px high.

katierosy
Apr 26th, 2010, 02:57 PM
your Height of header div is overlapping on yellowbar,
change the height of header div to "auto";
add a clear div to clear the floated elements, before the closing div tag of header.

EX:...
</table>
<div style="clear: both;"></div>
</div>

#header {
background-color:#103880;
background-image:url(images/index_01.jpg);
display:block;
height:auto;
width:1000px;
}

SB65
Apr 26th, 2010, 08:39 PM
I think there are quite a few problems here.

As katierosy says, you can remove the height from #header. However, there's no need for a clearing div - here you can clear the float by setting overflow:auto on #header.

Then, you have the logo at the top both actually on the page as an image but also as the background image on #header. I'd take it off #header.

Next, your menu doesn't align correctly with the image fragment at the top of #yellowbar - add cellspacing=0 as an attribute of your table.

Now the #yellowbar misalignment. The images and buttons are misaligned just because the image doesn't align with the background image on #yellowbar. This can be sorted by adding a margin-top on these elements. Or you could redo your images.

Finally the input fields. I'd suggest floating everything in that #yellowbar, including the input fields - I think that makes it a bit easier, then you can sort those out with a top margin as well.

So, after a bit of messing about:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Pomeranz Bookseller</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base href="http://www.awebforyou.com/test/" >
<style type="text/css">
/* CSS Document */
body{
margin:0px;
padding:0px;
background-color:#ffffff;
font-family: Arial, Helvetica, sans-serif;
}
img{
border:none;
}
#header{
background-color:#103880;
width:1000px;
display:block;
overflow:auto

}
#main{
width:1000px;
height:868px;

}
#cart{
width:228px;
float:right;
color:#ffffff;
font-size:18px;

}

.topcart{

background-color:#0C3279;

height:67px;

}
.topcart img{
float:left;
}
.cartlinks{
padding:0px;
margin:0px;
clear:left;
background-color:#15408F;
}
#yellowbar{
width:1000px;
height:46px;
display:block;
background:yellow url(http://www.awebforyou.com/test/images/yellow.jpg) no-repeat top left;

}
#yellowbar form{
float:left
}
#yellowbar input{float:left}

#yellowbar a{display:block;float:left}
#yellowbar img{float:left}

#yellowbar .margin{margin-top:2px}
#yellowbar .moremargin{margin-top:10px}

.logo{
float:left;
}
#menu{
float:left;

}

#menu td{padding:0;border:0}

a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: underline;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}

</style>
</head>
<body>
<div id="main">
<div id="header">
<div>
<img src="images/logo.gif" alt="Pomerantz Books" class="logo">
</div>

<div id="cart"><span class="topcart"><img src="images/toptopright_01.jpg" alt="cart"> <br />You have 0 Items</span>
<div class="cartlinks"><a href="cart.asp"><img src="images/cartbuttons_02.jpg" alt="" width="96" height="33" border="0"></a>
&nbsp;
<a href="checkout.asp"><img src="images/cartbuttons_03.jpg" alt="" width="96" height="33" border="0"></a></div>

</div>
<table id="menu" cellspacing="0">
<tr>
<td>
<a href="default.asp"><img src="images/menu_01.jpg" alt="" width="112" height="41" border="0"></a></td>

<td>
<a href="books.asp"><img src="images/menu_02.jpg" alt="" width="104" height="41" border="0"></a></td>
<td>
<a href="gifts.asp"><img src="images/menu_03.jpg" alt="" width="102" height="41" border="0"></a></td>
<td>
<a href="whatsnew.asp"><img src="images/menu_04.jpg" alt="" width="102" height="41" border="0"></a></td>
<td>
<a href="aboutus.asp"><img src="images/menu_05.jpg" alt="" width="106" height="41" border="0"></a></td>
<td>

<a href="cart.asp"><img src="images/menu_06.jpg" alt="" width="111" height="41" border="0"></a></td>
<td>
<img src="images/menu_07.jpg" width="363" height="41" alt=""></td>
</tr>
</table>

</div> <!-- end header -->

<div id="yellowbar">
<a href="#"><img src="images/icon1.gif" alt="icon"></a>
<a href="#"><img src="images/twitter.gif" alt="twitter"></a>
<form method="post" action=newsletter.asp>
<input class="moremargin" type="text" name="email" size="28" value="Enter Email for free newsletter">
<input class="margin" type="image" name="submit" src="images/searchbar_08.jpg">
</form>
<img class="margin" src="images/searchbar_09.jpg" width="185" height="42" alt="">
<form method="post" action="search.asp">
<input class="moremargin" type="text" name="serchitem" size="28" value="">
<input type="image" class="margin" name="submit" src="images/searchbar_12.jpg">
</form>
</div> <!-- end yellowbar-->

<p> Some more text after</p>
</div> <!--end main -->
</body>
</html>

I've taken out all the spaces in #yellowbar, and added a padding-left - amend as required.

Incidentally, there's no need to use a table here for the menu, it's better marked up as a list, and probably easier to style.