Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    324
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slight layout problem

    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/

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,776
    Thanks
    19
    Thanked 155 Times in 146 Posts
    looks like you fixed it
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    324
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Huh !

    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


  • #4
    Regular Coder
    Join Date
    Sep 2004
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Attached Thumbnails Attached Thumbnails Slight layout problem-whitespace.jpg  

  • #5
    Regular Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    324
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Once I thought I was wrong but I was mistaken.

  • #7
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Once I thought I was wrong but I was mistaken.

  • #8
    Regular Coder
    Join Date
    Sep 2004
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The CSS is:

    Code:
    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:
    Code:
    <link href="style%20sheet/global.css" rel="stylesheet" type="text/css"></link>

  • #9
    Regular Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    324
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi everyone,

    Yer thanks for that scooter thats the css file.

    Anyone see the problem lurking in there somewhere ?



  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •