...

View Full Version : Slight layout problem



wap3
08-09-2005, 10:13 PM
Hi everyone,

Im working on a layout for a bike shop and its my first css site, so I am now stuck on a slight problem with the layout.

If you look at the following page in Internet Explorer the main white background is to wide in relation to the page. The outside edge should line up square with the top header.

Could someone with a bit more css experience tell me what the problem is, cos i am pretty stuck at the present.

Thanks very much if u could help.

wap3

:)

http://www.martindale.paulblackonline.co.uk/

chump2877
08-10-2005, 01:37 AM
looks like you fixed it

wap3
08-10-2005, 06:07 PM
Huh ! :confused:

I dont think so it is still doing the same thing for me in my internet explorer, i got version 5.5 i think so maybe its just that one.

If someone could check for me, or if you could post quick screen**** chump I can see if ur right.

Thanks

wap3

:D

Scootertaj
08-10-2005, 07:37 PM
Looks like it's IE only, FF is fine.
I attached a picture of what I think you are talking about, tell me if I'm right or wrong.

wap3
08-10-2005, 08:30 PM
Hi

Yer thats the one, the edge of that white background should be in more towards the edge of the bicycle wheel, so that it lines up with the edge of the top header.

Cheers :D

Tristan Gray
08-11-2005, 01:05 PM
Uhhh... I'll bet money that if you show me your CSS that you are using a relative unit to define the width of your content box and/or your header and they are both inheriting from a parent element. Problem is that FireFox inherits one way and IE does it another. This leads to inconsistency. Please post your CSS code so that we can help you better.

Tristan Gray
08-11-2005, 01:15 PM
You also have a problem with your nav bar. If you go to the drop down at tyres and tubes the text goes beyond the background of the menu highlight.

Scootertaj
08-11-2005, 05:39 PM
The CSS is:



img {border: 0px }

#page {
background-image: url(../images/tag.gif);
background-repeat: repeat;
text-align: left;
padding: 0px;
margin-top: 10px;
margin-left: 10px;
margin-bottom: 0px;
margin-right: 0px;
}

#header {background-image: url(../images/header.gif);
height: 51px;
width: 749px;
padding-top: 0;
}

div#navigation {background-image: url(../images/navigation_bar.gif);
background-repeat: no-repeat;
height: 22px;
width: 749px;
padding: 0px;
border: 0px;
top: 0px;
}

div#navigation ul, div#navigation li {
margin: 0;
padding: 0;
display: inline;
list-style: none;
}

div.table {background-image: url(../images/background_wave.gif);
height: 900px;
width: 749px;
padding: 0px;
border: 0px;
margin-top: 40px;
top: 0px;
}

#graphic { background-image: url(../images/graphic_header.jpg);
background-repeat: no-repeat;
height: 80px;
width: 749px;
position: relative; top: 25px;
}

div.leftcol {
height: 775px;
width: 470px;
float: left;
padding-left: 30px;
padding-top: 20px;
}

div.leftcol h1 { font-family: Verdana,Arial,Helvetica;
font-size: 11px;
font-weight: normal;
color: #333333; }

div.leftcol p {margin: 2.0em 0;}

div.rightcol {
height: 705px;
width: 200px;
font-family: Verdana,Arial,Helvetica;
font-size: 11px;
color: #333333;
margin-left: 515px;
padding-top: 85px
}

div.footcol { background-image: url(../images/footer1.gif);
background-repeat: no-repeat;
height: 50px;
width: 749px;
font-family: Verdana,Arial,Helvetica;
font-size: 11px;
color: #333333;
padding-right: 27px;
padding-bottom: 30px;
float: left;
}

a.subtext:visited { color: #333333; text-decoration: none; font-weight: bold; }
a.subtext:hover { color: #b00000; text-decoration: underline; font-weight: bold; }
a.subtext:link { color: #333333; text-decoration: none; font-weight: bold; }

#topbike {background-image: url(../images/top_bike.gif);
background-repeat: no-repeat;
height: 134px;
width: 205px;
padding-left: 14px;
}

#special { background-image: url(../images/special_offer.gif);
background-repeat: no-repeat;
height: 155px;
width: 205px;
}

div#top5 { background-image: url(../images/top5.gif);
background-repeat: no-repeat;
font-family: Gill Sans MT, Verdana, Arial, Helvetica;
font-size: 15px;
font-weight: bold;
color: #333333;
height: 149px;
width: 205px;
padding-left: 0px;
padding-top: 0px;
list-style: none;
}

div#top5 ol {
list-style: numbered;
list-style-position: outside;
padding-top: 20px;
}

div#top5 ol li a:link { color: #333333;
text-decoration: none; list-style: none; }
div#top5 ol li a:hover { color: #b00000;
text-decoration: overline; list-style: none;}
div#top5 ol li a:visited { color: #333333;
text-decoration: none; list-style: none;}

div.txtlinks { background-image: url(../images/footer1.gif);
background-repeat: no-repeat;
height: 23px;
width: 749px;
font-family: Verdana, Arial, Helvetica;
font-size: 11px;
color: #ffffff;
}

div#txtlinks ul, div#txtlinks li {
margin: 0;
padding: 0;
display: inline;
list-style: none;
padding: 0 5px;
}

div#txtlinks ul li a:link { color: #ffffff;
text-decoration: none; }
div#txtlinks ul li a:hover { color: #ffffff;
text-decoration: overline; }
div#txtlinks ul li a:visited { color: #ffffff;
text-decoration: none; }

div.footer2 { background-image: url(../images/footer2.gif);
background-repeat: no-repeat;
height: 18px;
width: 749px;
text-align: right;
font-family: Verdana, Arial, Helvetica;
font-size: 9px;
padding-top: 0px;
padding-right: 20px;
color: #ffffff;
}

div#advert { background: url(../images/footer3.gif);
height: 31px;
width: 749px;
margin-top: 20px;
}

div#advert ul, div#advert li {
margin: 0;
padding: 0;
display: inline;
list-style: none;
}

div#adverts1 ul, div#adverts1 li {
margin: 0;
padding: 0;
display: inline;
list-style: none;
}


div#author { height: 38px;
width: 749px;
font-family: Verdana, Arial, Helvetica;
font-size: 9px;
float: left;
padding-left: 30px;
}

div#author ul, div#author li {
margin: 0;
padding: 0;
display: inline;
list-style: none;
}


I couldn't view the source in IE so just went to FF and found:


<link href="style%20sheet/global.css" rel="stylesheet" type="text/css"></link>

:thumbsup:

wap3
08-12-2005, 06:34 PM
Hi everyone,

Yer thanks for that scooter thats the css file.

Anyone see the problem lurking in there somewhere ?

:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum