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 8 of 8
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question YUI reset - site still looks out of place in IE6 - please help

    on my site: http://vila.slicedcreative.co.uk

    Why is my layout all out of place in IE6 when i am using the YUI library CSS reset? please help?!

    html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//E" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="css/reset-style.css" />
    <link rel="stylesheet" type="text/css" href="css/vila-style.css" />
    </head>
    <body>
    <div id="doc">
        	<div id="hd">
        		<img src="/images/logo.png" border="0" alt="Vila Fula Logo" align="left" />
        		<img src="/images/top-text.png" border="0" alt="top text" class="toptext" align="right" />
        		<div id="navbar">
                        <img src="/images/left_side_nav.png" alt="left side nav" class="nav_end" />
                            <ul id="menu">
                                <li><a href="#" title="Vila Fulmar">Villa Fulmar</a></li>
                                <li><span></span><a href="#" title="The Area">The Area</a></li>
                                <li><span></span><a href="#" title="The Property">The Property</a></li>
                                <li><span></span><a href="#" title="Gallery">Gallery</a></li>
                                <li><span></span><a href="#" title="Contact Us">Contact Us</a></li>
                                <li><span></span><a href="#" title="Availability & Prices">Availability & Prices</a></li>
                            </ul>
                        <img src="/images/right_side_nav.png" alt="right side nav" class="nav_end" />
                 </div>
        	</div>
        	<div id="bd">
        	<div class="yui-g">
        			<div id="leftcolumn" class="yui-u">
        			<h1>Villa Fulmar</h1>
        			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada tempor felis sit amet ultrices. Integer felis eros, aliquam ut feugiat quis, accumsan vel purus. Vestibulum non est nibh, eu pellentesque dolor. Aliquam erat volutpat. Donec sagittis urna bibendum dolor fringilla vel vestibulum felis fringilla. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse a nisi velit. Proin sagittis tortor ac velit condimentum dictum. Sed ultricies mi sed metus rhoncus at ullamcorper arcu mollis. Sed vitae libero eu dui facilisis condimentum a eget odio. Ut condimentum, velit eget ullamcorper pellentesque, purus sapien egestas dui, et volutpat odio massa eu ante. Duis interdum, massa vitae iaculis cursus, elit lorem posuere ante, id posuere nunc dui lacinia elit. Pellentesque sit amet malesuada mauris. Suspendisse dui ligula, iaculis non elementum laoreet, commodo et mauris. Fusce enim ligula, ornare rhoncus sollicitudin nec, iaculis vel nisl. Etiam a erat nisi. Sed in orci vel dui suscipit tempor eget eget diam. Etiam scelerisque tortor et felis faucibus condimentum. Maecenas ac consectetur mi.</p>
        			<h2>header2</h2>
    <p>
    Quisque lacus magna, interdum a blandit vel, imperdiet sed tortor. Morbi iaculis blandit erat, ac gravida lectus fermentum vel. Phasellus posuere augue eleifend augue pharetra nec ornare dolor vestibulum. Quisque vel magna leo. Sed mollis ullamcorper tortor in pellentesque. Nullam vitae tempor elit. Nulla enim mi, malesuada at placerat sed, fringilla eu justo. Vivamus porttitor pharetra enim sed vulputate. Integer a dolor velit. Maecenas blandit elementum augue nec blandit.</p>
    <p>
    Integer nibh diam, fermentum quis consequat eget, aliquam sit amet nisi. Aenean quis est felis. Sed gravida vehicula mi, in facilisis enim luctus in. Proin suscipit sagittis consectetur. Nulla nec nisl lectus. Pellentesque nunc sem, eleifend non ornare non, euismod eget velit. Quisque et nisi id felis condimentum eleifend vel sed elit. Cras ac magna massa, et pretium eros. Morbi suscipit, neque quis consectetur aliquam, dui diam facilisis felis, quis posuere tellus massa in eros. Aenean accumsan arcu non libero lacinia ullamcorper.</p>
    <h2>header3</h2>
    <p>
    Pellentesque tempor erat orci, nec ornare urna. Praesent ornare viverra sapien ut pretium. Duis euismod, odio non vulputate lobortis, velit orci scelerisque risus, id porttitor nibh mi quis est. Maecenas vel nisi eu dui ultrices posuere. Vivamus varius orci ac massa facilisis lobortis. Cras sagittis aliquet auctor. Etiam cursus felis eu magna iaculis dictum. Aliquam erat volutpat. Nullam elementum turpis sit amet mi tincidunt tincidunt. Proin egestas odio vitae quam venenatis hendrerit. Praesent interdum lacus venenatis diam lobortis accumsan. Vestibulum faucibus, eros a porta tincidunt, orci lorem blandit ligula, in aliquam sapien lectus id orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Duis in elit quis enim hendrerit facilisis non at augue. Cras urna ante, commodo at ultricies non, aliquet nec lorem. Nunc aliquam porta risus consequat eleifend. Pellentesque gravida nisi in nisi lobortis at interdum quam placerat. Fusce blandit neque ut mi porttitor pretium dictum mi vulputate. Quisque at purus quis neque consequat vestibulum in sit amet metus.</p>
    <h2>header4</h2>
    <p>
    Nullam aliquam ligula sed nisi commodo sed varius felis consequat. Fusce non felis quis justo gravida rhoncus quis nec urna. Integer ullamcorper nibh et arcu gravida fringilla. Aliquam augue lectus, sodales quis volutpat vitae, vulputate vel nibh. Donec in porttitor nibh. Nam id tellus sed libero laoreet vestibulum in quis nisl. Quisque dapibus odio neque, a varius nulla. Aliquam vel feugiat sapien. Praesent eget tortor non massa dictum egestas id sit amet diam. Donec sem diam, euismod a tincidunt eu, imperdiet ac libero. Morbi suscipit tristique ante, vitae dictum odio ullamcorper eu. Cras nec mauris neque. Ut vel turpis augue. Vestibulum convallis accumsan nisl ut pulvinar. </p>
        			</div>
        			<div class="yui-u" id="rightcol">
        			<a href="#" title="map">	
        				<img src="/images/map.gif" border="0" alt="Click here for multimap" />
        			</a>
        			<div class="line"></div>
        			<h3>A Warm Welcome to Your<br />
        			Home in the Sun.</h3>
        			<h4>Your Costa Blanca Spain<br />
    luxury villa facilities:</h4>
        			<ul>
     				 <li><a href="#" title="36' Swimming pool">36' Swimming pool</a></li>
    				 <li><a href="#" title="Pool bar">Pool bar</a></li>
    				 <li><a href="#" title="Roof terrace">Roof terrace</a></li>
    				 <li><a href="#" title="Sleeps up to 8">Sleeps up to 8</a></li>
    				 <li><a href="#" title="En Suite">En Suite</a></li>
    				 <li><a href="#" title="2 Bathrooms">2 Bathrooms</a></li>
    				 <li><a href="#" title="Dual aspect sun lounge">Dual aspect sun lounge</a></li>
    				 <li><a href="#" title="Satellite TV, read all">Satellite TV, read all</a></li>
    				 <li><a href="#" title="Read all about the villa...">Read all about the villa...</a></li>
    				</ul>
        					<a href="#" class="sideimage1">
        						<b>Around the villa</b>
        						<span>Award winning beaches<br />
    							Fabulous local restaurants<br />
    							XXX<br />
    							XXX</span>
        					</a>
        					<a href="#" class="sideimage2">
        						<b>Costa Blanca sports</b>
        						<span>golf near...<br />
        						Tennis in...<br />
        						horse riding at...<br />
        						Water sports</span>
        					</a>
        					<a href="#" class="sideimage3">
        						<b>Villa guest book</b>
        						<span>Read how our villa guests<br />
        						 who rented our Costa<br />
        						 Blanca villa in Spain enjoyed<br />
        						 their time and relaxed!</span>
        					</a>
        			</div>
        		</div>
        	</div>
        	<div id="ft">
        		<div class="textonright">Web Design by Sliced</div>
        	&copy; Fulmar 2009. Contact us for our <u>Villa in Spain to rent on the Costa Blanca</u> 
        	</div>
        </div>
    </div>
    </body>
    </html>
    css
    Code:
    html {
    	background-color: #1e70b5;
    
    }
    body{
    	background-color: #1e70b5;
    	font-family:Arial,Verdana,Sans-serif;
    		background-image: url(/images/back.jpg);
    	background-repeat: no-repeat;
    	background-position: center;
    
    }
    h1{
    	color: #264a81;
    	font-size: 20px;
    	padding-bottom: 14px;
    }
    h2{
    	color: #264a81;
    	font-size: 14px;
    	padding-bottom: 14px;
    }
    h3{
    	color: #264a81;
    	font-size: 16px;
    	line-height: 18px;
    	padding: 10px 0 0 20px;
    	font-weight: bold;
    	
    }
    
    
    h4{
    	color: #515151;
    	font-size: 12px;
    	line-height: 18px;
    	padding: 10px 0 0 20px;
    	font-weight: bold;
    	
    }
    p{
    	color: #7f7f78;
    	font-size: 12px;
    	line-height: 16px;
    
    	padding-bottom: 12px;
    }
    
    ul  a{
    	vertical-align: middle;
    }
    li{
    
    }
    
    li a{
    	vertical-align: middle;
    	
    }
    
    /** CLASSES **/
    .yui-g{
    	background-image: url(/images/1px_mid.png);
    	background-repeat: repeat-y;
    
    }
    .yui-u{
    	
    
    }
    
    #leftcolumn{
    	line-height: 18px;
    	padding-left: 62px;
    	width:582px;
    	float:left;
    
    }
    .navbar {
    	width:690px;
    	height:71px;
    	position: absolute; 
    	top:50px;
    	right:18px;
    }
    .firstbutton{
    	background-image: url(/images/left_side_nav.png);
    	background-position: left;
    }
    .toptext {
    	position: absolute;
    	top:10px;
    	right:42px;
    }
    /** END CLASSES **/
    
    /* Side image 1 */
    
    .sideimage1 {
    	background-image: url(/images/button_sprite.jpg);
    	background-position: 0px 0px;
    	text-decoration: none;
    	width:224px;
    	height:100px;
    	display:block;
    	position:relative;
    }
    .sideimage1:hover{
    	background-position: 0px -100px;
    }
    .sideimage1 span{
    	position:absolute;
    	top:34px;
    	left:80px;
    	color: #515151;
    	line-height: 14px;
    	font-size: 11px;
    }
    .sideimage1 b{
    	position:absolute;
    	top:14px;
    	left:80px;
    	color:#264a81;
    	
    }
    /* End Side image 1 */
    /* Side image 2 */
    .sideimage2 {
    	background-image: url(/images/button_sprite.jpg);
    	background-position: -224px 0px;
    	text-decoration: none;
    	width:224px;
    	height:100px;
    	display:block;
    	position:relative;
    }
    .sideimage2:hover{
    	background-position: -224px -100px;
    }
    .sideimage2 span {
    	position:absolute;
    	top:34px;
    	left:80px;
    	color: #515151;
    	line-height: 14px;
    	font-size: 11px;
    }
    .sideimage2 b{
    	position:absolute;
    	top:14px;
    	left:80px;
    	color:#264a81;
    	
    }
    /* End Side image 2 */
    /* Side image 3 */
    .sideimage3 {
    	background-image: url(/images/button_sprite.jpg);
    	background-position: -448px 0px;
    	width:224px;
    	height:100px;
    	display:block;
    	text-decoration: none;
    	position:relative;
    }
    .sideimage3:hover{
    	background-position: -448px -100px;
    }
    .sideimage3 span{
    	position:absolute;
    	top:34px;
    	left:80px;
    	color: #515151;
    	line-height: 14px;
    	font-size: 11px;
    	
    }
    .sideimage3 b{
    	position:absolute;
    	top:14px;
    	left:80px;
    	color:#264a81;
    
    }
    
    /* End Side image 3 */
    
    /* Right column */
    #rightcol {
     	width : 220px;
     	padding-right:41px;
     	position:relative;
     	float: right;	
    }
    #rightcol ul {
    	line-height: 14px;
    	padding: 12px 0;
    }
    #rightcol li {
    	list-style-type: disc;	
    	margin-left:32px;
    	color: #79c2ff;
    	margin-bottom: 4px;
    }
    
    #rightcol li a{
    	color: #464646;
    	font-size: 12px;
    	text-decoration: none;
    }
    #rightcol li a:hover{
    	color: #264a81;
    	font-size: 12px;
    	text-decoration: underline;
    }
    #rightcol img {
    	padding: 0 0 4px 4px;
    }
    #rightcol .line{
    	border-bottom: #bebebe 1px solid;
    	position:absolute;
    	top:84px;
    	left:0px;
    	width:224px;
    	line-height: 0px;
    
    }
    /* End Right Column */
    
    /** IDs **/
    
    
    #doc {
    	width:956px;
    }
    
    #hd {
    	line-height: 0px;
    	height:134px;
    	position:relative;
    }
    #bd {
    	line-height: 0px;
    	background-image: url(/images/top_page_03.png);
    	background-repeat: no-repeat;
    	min-height: 400px;
    	padding-top:49px;
    	width:956px;
    	line-height: 14px;
    }
    #ft {
    	background-image: url(/images/bottom.png);	
    	background-repeat: no-repeat;
    	width:896px;
    	height:28px;
    	color: #fff;
    	font-size: 10px;
    	padding-left: 38px;
    	padding-top: 24px;
    }
    #ft .textonright {
    	float:right;
    	padding-right:18px;
    }
    /** END IDs **/
    
    /** Menu **/
    #navbar {
    	width:746px;
    	height:71px;
    	float: right;
    	position: absolute; 
    	top:58px;
    	right:0px;
    }
    .nav_end {
    	width: 30px;
    	height: 71px;
    	float: left;
    }
    ul#menu {
    	height: 71px;
    	float: left;
    	margin: -3px 0 0 0;
    	list-style-type: none;
    }
    #menu li {
    	height: 71px;
    	float: left;
    	background-image: url(/images/1px_nav.png);
    	background-repeat: repeat-x;
    	display:inline;
    
    }
    #menu a:link,
    #menu a:visited,
    #menu a:active {
    	height: 71px;
    	padding: 2px 18px 0;
    	display: block;
    	background: url(/images/1px_nav.png) repeat-x;
    	line-height: 67px;
    	font-weight: bold;
    	font-size: 13px;
    	color: #264a81;
    	text-decoration: none;
    }
    #menu a:hover {
    	margin: 15px 0 0;
    	line-height: 37px;
    	background: url(/images/1px_nav_on.jpg) repeat-x;
    } 
    #menu span{
    	background-image: url(/images/nav_divider.jpg);
    	height: 37px;
    	width:2px;
    	float:left;
    	margin-top: 17px;
    }

  • #2
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    please help?

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Have a look at the reply to your other post apparently asking the same question...

  • #4
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    the width is about 674px in Firefox and in IE7 it is about 694px?!

    Can someone please help?!

    thanks

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    In IE7? But this post is headed IE6.

    Which is it?

    EDIT: And the width of what?
    Last edited by SB65; 10-29-2009 at 04:24 PM.

  • #6
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question

    ok, I give up with IE6, it's IE7 I am working on now, I need to sort out the menu width?!

  • #7
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Exclamation

    ok, I have given it a width of 698px in FireFox!

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The <span> tags in IE are being added to the width of each <li> element, resulting in the total length being about 10px longer than in FF. Hide the spans and the lengths are the same.

    How about reforming your background images to include the divider? This would also allow you to remove those <span> elements and leave you with tidier code.

    Or, I suppose, position the <span> elements absolutely so they sit on top of the <li> and don't take up any width. Just add position:absolute to the <span> css seems to do it.
    Last edited by SB65; 10-29-2009 at 04:52 PM.


  •  

    Posting Permissions

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