SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navbar issue in IE (Not Chrome/Firefox)

    I'm really sorry to keep bothering you all, I hate having to keep asking for help for such small issues.

    Small issue but it's starting to give me a headache. I've changed my navbar a little and removed the fixed width because some items were long and other short and it just looked terrible with massive empty spaces between certain links.

    But for whatever reason, taking width out of the IE CSS style sheet just makes the buttons all 100% width of the page. If I change the height of my Navbar DIV they are all aligned in a list underneath one another. If I reset the width they work fine in a single bar but are obviously squashing the text/link within.

    I even looked up a few navbar tutorials which had almost verbatim code to mine, copied and pasted and it had no effect. I looked around on those tutorials but found no mention of IE specific issues so I don't know what it is.

    TLDR; IE is making my navbar links 100% wide unless I specify a width even though the same thing in Chrome/Firefox works fine. If I specify a width it works but this is not a workable solution for my navigation.

    CSS for the links
    Code CSS:
    /*Navigation Bar*/
    ul.navbarul{list-style-type:none;margin:auto auto;padding:0;float:left;position:relative;left:50%;}
    li.navbarli{float:left;right:50%;position:relative;}
     
    a.nav:link,a.nav:visited
    	{font-size:14px;display:block;width:25%;text-align:center;height:30px;font-weight:bold;color:#FFFFFF;background-color:#6499c1;text-decoration:none;text-transform:uppercase;padding: 8px 15px;}
    a.nav:hover,a.nav:active{background-color:#5983a3;color:#ffffff;height:30px;font-size:14px;}

    CSS for the divs.
    Code CSS:
    .body { width:100%;}
    	.navbar {background:#6499c1;width:100%;height:30px;}
    	.navarea{width:100%; height:107px;background-image:url('images/banner4.jpg');background-repeat:no-repeat;}

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi darkwarrior,

    Can you post the complete code? it will make it easier to give you the right answers.
    Code:
    /*Navigation Bar*/
    ul.navbarul{
      margin:auto auto;
      float:left;
      position:relative;
      left:50%;
    }
    li.navbarli{
      float:left;
      right:50%;
      position:relative;
    }
    That's a really unusual combination of styles you have there
    Chances are you don't need the relative positioning at all or the margin: auto;

    If it is just a horizontal list of links you are after all you need to do is float the list items and links to the left, that's all.
    Code:
    /*Navigation Bar*/
    .navbarul {
      overflow: hidden; /* clear floats */
      width: 100%; /* clear floats in IE */
    }
    .navbarul li {
      float:left;
    } 
    .navbarul a {
      float: left;
      padding: 8px 15px;
    }
    Hope it helps

  3. #3
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't find the tutorial I got it from but its to do with centring the navbar within the div.

    EDIT: And I did get rid of the margin, in IE it was causing a large gap from the left hand side in the navbar. Its at least gotten them all onto one line again but I have to still specify the width.

    If it helps its here http://workclaims.mediaxombie.com

    ANd of course, he is my code. (Note, this is my first CSS file, Ive learned a lot from it for future endeavours but it is probably not as efficient as it could be, I am aware of that.
    Code CSS:
    @charset "utf-8";
    /* CSS Document */
     
    body{
    	background-color:#FFFFFF;
    	padding-top:15px;
    	padding-bottom:0;
    	text-align: center;
    	font-family: Verdana, Arial, Helvetica, sans-serif; /*Tahoma,*/
    	line-height: 150%;
    	letter-spacing:0px;
    	font-size:0.70em;
    	font-weight:normal;
    	color:#777;
    	white-space:normal;
    	}	
    /*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    Navigation Bar Code////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    */
    /*Regular Links*/
    a:link,a:visited,a:active{color:#71b9e5;text-decoration:none;font-size:12px;}
    a:hover{color:#C40005;text-decoration:none;font-size:12px;}
     
    /*Navigation Bar*/
    ul.navbarul{list-style-type:none;margin:0;padding:0;float:left;position:relative;left:50%;}
    li.navbarli{float:left;right:50%;position:relative;}
     
    a.nav:link,a.nav:visited
    	{font-size:14px;display:block;width:150px;text-align:center;height:30px;font-weight:bold;color:#FFFFFF;background-color:#6499c1;text-decoration:none;text-transform:uppercase;padding: 8px 15px;}
    a.nav:hover,a.nav:active{background-color:#5983a3;color:#ffffff;height:30px;font-size:14px;}
     
    /*Footer Links*/
    a.footer:link,a.footer:visited,a.footer:active {color:#000000;text-decoration:none;font-size:11px;}
    a.footer:hover {color:#bf4c4c;text-decoration:none;font-size:11px;} 
     
    /*Rollover Image without HTML Or Javascript*/
    #contentRightClaimButton{display:block;width:218px;height:78px;background:url("images/rightmenubarbuttonCSS.gif") no-repeat 0 0; margin-left: auto;margin-right: auto;}
    #contentRightClaimButton:hover{background-position:0 -78px;}
    #contentRightClaimButton span{display: none;}
     
    /*CSS for the Compensation Page Image Map*/
    #compensationMap {width: 497px; height: 373.5px;background: url("images/compensationamountmap.gif");margin: 0 auto; padding: 0;no-repeat 0 0; position: relative;}
    #compensationMap li {margin: 0; padding: 0; list-style: none;position: absolute; }
    #compensationMap li, #compensationMap a {height:27px; display: block;}
    	#injuryhead {left: 12px; top: 17px; width: 245px;height:27px;}
      	#injuryarm {left: 12px; top: 78px;  width: 204px;height:27px;}
      	#injuryhand {left: 12px;  top: 177px; width: 214px;height:27px;}
      	#injuryleg {left: 12px; top: 263px;  width: 215px;height:27px;}
      	#injuryneck {left: 261px; top: 32px;  width: 234px;height:27px;}
      	#injurytorso {left: 275px; top: 125px;  width: 220px;height:27px;}
      	#injuryhip {left: 281px; top: 197px;  width: 213px;height:27px;}
     
    #injuryhead a:hover {background: transparent url("images/compensationamountmap.gif")-12px -392px no-repeat;}
    #injuryarm a:hover {background: transparent url("images/compensationamountmap.gif")-12px -453px no-repeat;}
    #injuryhand a:hover {background: transparent url("images/compensationamountmap.gif")-12px -552px no-repeat;}
    #injuryleg a:hover {background: transparent url("images/compensationamountmap.gif")-12px -638px no-repeat;}
    #injuryneck a:hover {background: transparent url("images/compensationamountmap.gif")-261px -407px no-repeat;}
    #injurytorso a:hover {background: transparent url("images/compensationamountmap.gif")-275px -500px no-repeat;}
    #injuryhip a:hover {background: transparent url("images/compensationamountmap.gif")-281px -572px no-repeat;}  
    /*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    End Navigation Bar Code//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    */
    ul.regul{list-style-type:circle;}
    li.regli{font-size:1.1em;color:#000000;line-height:150%;margin:0 0 0.8em 0;}
    ul.contentsul{list-style-type:none;}
    li.contentsli{font-size:1.1em;color:#000000;line-height:150%;margin:0 0 0.8em 0;text-transform:capitalize;}
     
    h1{color:#C33;text-align:center;text-transform:font-style:underline;}	
    h2{color:#6499c1;text-align:left;text-transform: capitalize;}
    img {border: 0;}
    	.imgalt{padding: 0 0 0 0 ;}
    	.testimg{float:right;}
    table, th, td, tr{border-collapse:collapse;border: 1px solid black;}
    table{width:100%;}
    td.alt{width:30%;background:#1185fc;color:fff;}
     
    em{color: #C33;font-size: 85%;font-style: normal;text-transform: uppercase;}
    p{font-size:12px;}
    	.contentheader{font-size:1.5em;text-align:left;vertical-align:middle;color:#ffffff;padding:5px 5px 10px 5px;text-transform:capitalize;font-weight: bold;}
    	.sidebarheader{font-size:1.3em;text-align:center;vertical-align:middle;color:#ffffff;text-transform:capitalize;font-weight: bold;padding:3px 0 3px 0;}
    	.contentdetails{font-size:1.1em;text-align:left;vertical-align:top;color:#000000;margin:1em 0;padding:5px 5px 5px 0;}
    		.contentemphasis{font-size:1.3em;padding:0 0 0 6%;line-height:170%;}
    	.copyright{font-size:9px; text-align:center;vertical-align:text-top;}
    	.testimonials{font-size:1.1em;text-align:left;vertical-align:text-top;padding:0 5px 0 5px;font-style:italic;}
    		.testimonialssig{font-size:1em;text-align:right;font-weight:bold;color:#5983a3;}
    	.compensationdetail{font-size:1.4em;color:#000;text-transform:uppercase;font-style:bold;padding: 0 5px 0 0;vertical-align:middle;}
    	.disclaimer{text-align:left;font-size:9px;}
    	.displayerror{color:#C06;font-style:italic;font-weight:bold;}
    	.contact{font-size:1em;text-align:left;}
    	.claimtext{font-size:1.1em;color:#777;text-align:right;font-weight:bold;padding: 0 3px 1px 0;vertical-align:middle;}
    	.claimtextalt{font-size:1.1em;color:#fff;text-align:right;font-weight:bold;padding: 0 3px 1px 0;vertical-align:middle;}
    	.submissiontext{font-size:1.4em;color:#777;}
    	.subheaders{font-size:1.7em;color:#5983a3;text-align:left;text-transform:capitalize;border-bottom:1px solid #ccc;margin:1em 0 .3em 0;}
    		.services{font-size:1.1em;text-align:right;vertical-align:bottom;color:#000000;padding:0 0.5em 0 0;}
    	.compensationtextmain{font-size:1.1em;color:#000;text-align:left;padding: 0 3px 1px 1.4em;vertical-align:middle;}	
    		.compensationtextnest{font-size:1.1em;color:#5983a3;text-align:left;padding: 0 3px 1px 4em;vertical-align:middle;}
    	.compensationtext{font-size:1.4em;color:#000;text-align:left;padding: 0 3px 1px 3px;vertical-align:middle;}
    		.compensationtextamountnest{font-size:1.4em;color:#5983a3;text-align:left;padding: 0 3px 1px 3px;vertical-align:middle;}
     
    /*//////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////DIVs 
    ////////////////////////////////////////////////////////////////////
    */
    .shell {width:950px; text-align: left;margin:0px auto;} /*margin is essential here to centre the content in the browser*/
    .main  {width:100%; padding:0 ; margin:0 auto;overflow:auto;border:3px solid #ccc;}
     
    .header {text-align:left;width:100%;}
    	.logo { float: left; padding:10px 0 15px 15px; width:45%;}
    	.logo2{ float: right; padding:10px 9px 0 0; width:34%}
     
    .body { width:100%;}
    	.navbar {background:#6499c1;width:100%;}
    	.navarea{width:100%; height:107px;background-image:url('images/banner4.jpg');background-repeat:no-repeat;}		
     
    .content{width: 100%;float:left;}
     
    	/*The Left Content Box - This contains all the information for each page */
    	.contentleft{width:72%;float:left;margin: 5px 0 1em 0.6em;}
    		.contentleftshell{width:100%;}
    		.contentleftheader{width:100%;background:#6499c1;}
    		.contentleftdetail{width:100%;white-space:normal;}
    			.contentleftservices{width:100%;white-space:normal;background:#EEE;padding: 0 0 1em 0.5em}
     
    					 /*A table for holding data on compensation amounts*/
    					 .compensationtablecontainer{width:100%;white-space:normal;overflow:hidden;display: none;}	
    							.compensationtableleft{width:75%;height:35px;float:left;border-bottom:#eee 1px solid;}
    					 		.compensationtableright{width:25%;height:35px;float:left;border-bottom:#eee 1px solid;}
    					 .compensationtablecontainernoscript{width:100%;white-space:normal;overflow:hidden;display: block;}
     
    	/*The Right Content Box - This contains the include menu for each page */	
    	.contentright{width:25%;float:right;text-align:right;margin: 5px 0.6em 3px 0;}
    		.contentrightheader{width:100%;background:#6499c1;}
    		.contentrightdetail{width:100%;text-align:center;padding:2.4em 0 1em 0;}
    			.claimamount{width:100%;}
    					    .claimamountleft{width:50%;height:35px;float:left;background:#ffffff;}
    					 .claimamountleftalt{width:50%;height:35px;float:left;background:#5983a3;}
    					   .claimamountright{width:50%;height:35px;float:left;background:#ffffff;}
    					.claimamountrightalt{width:50%;height:35px;float:left;background:#5983a3;}
     
    .footermain{width:100%;float:left;display:inline;}
    	.footerdivider{width:100%;background:#6499c1;height:3px;float:left;}
    	.footerleft{width:50%;float:left;}
    	.footerright{width:50%;float:right;text-align:center;}
    	.footerdisclaimer{width:100%;float:left;}	
     
     
    /*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    End Navigation Bar Code//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    */
     
    select { background-color: #f5f5f5; color: #000000; margin-bottom: 10px;border: 1px solid #999999;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 14px;}
    label {
    		display: block;   
    		width: 40%;    
    		padding: 2px 0 2px 0;
    		float:left;
    		margin-right: 1em;
     		font:bold 12px Arial, Helvetica, sans-serif; 
    		color:#505050; 
    		text-transform:capitalize;}
    label em {color: #C33;font-size: 85%;font-style: normal;text-transform: uppercase;}
    textarea:focus, input:focus {border: 1px solid #FC0;}
    form {border: 0px;font-family: Verdana, Arial, Helvetica, sans-serif;}
    	.fields {  
    		background-color: #f5f5f5;  
    		color: #000000;  
     		border: 1px solid #999999;    
     		font-size: 14px;  
     		text-align: left;
     		margin-bottom: 10px;}
    	.errorstyle{
    		border:2px solid #C03;
    		background-color: #f5f5f5; 
    		color: #000000;    
     		font-size: 14px;  
     		text-align: left; 
     		margin-bottom: 10px; }	
    	.buttons {   
    		display: block;
    		cursor:pointer;
    		float:right;
    		font-weight:bold;border:1px solid #000;
     		font-size: 14px;  
    		background-color:#C40005;  
     		color: #fff;}
    fieldset {   
    		font-size:14px;
    		margin: 0 0 -1em 0;      
    		padding: 0 0 1em 0;  
    		border: 0 #000;    
    		background-color: #ffffff;}  
    	.alt{background-color:#ffffff;}
    legend {margin-left: 1em;color: #5983a3;font-weight: bold;padding: 0; }  
    /*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    End Navigation Bar Code//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    */
     
     
    form.formmini {font-family: Verdana, Arial, Helvetica, sans-serif;border:0px;text-align:right;
    				border-radius:1em;border:3px solid #ccc;
    				background: #6499c1;
    				zoom:1;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7eb3dd', endColorstr='#4c8dbf');
    				}
    	.fieldsmini {  
    		background-color: #f5f5f5;  border: 1px solid #999999;
    		color: #000000;    
     		font-family: Verdana, Arial, Helvetica, sans-serif;  
     		font-size: 14px;  
     		text-align: left;padding: 0 0 0 0; }
    	.buttonsmini {   
    		display: block;
    		cursor:pointer;
    		float:right;
    		font-weight:bold;border:1px solid #000;
     		font-size: 14px;  
    		background-color:#C40005;  
     		color: #fff;		-moz-box-shadow: 5px 5px 5px #888;-webkit-box-shadow: 5px 5px 5px #888;box-shadow: 5px 5px 5px #888;
    		border-radius:1em;}
    	.labelmini {
    		display: block;  
    		text-align:right; 
    		vertical-align:middle;
    		margin: 0 4px 0 0;
    		float:left;
     		font:bold 12px Arial, Helvetica, sans-serif; 
    		color:#ffffff; 
    		text-transform:capitalize;}
    Code HTML4Strict:
                     <div class="navbar">
      									<ul class="navbarul">
            								<li class="navbarli"><a href=<?php if(isset($linkclaimpage)) { echo $linkclaimpage; } else { echo "#"; } ?> class="nav">Start A Claim</a></li> 
               								<li class="navbarli"><a href=<?php if(isset($linkclaimpage)) { echo $linkclaimpage; } else { echo "#"; } ?> class="nav">Our Services</a></li>
               		 						<li class="navbarli"><a href=<?php if(isset($linkclaimpage)) { echo $linkclaimpage; } else { echo "#"; } ?>  class="nav">Compensation</a></li> 
               		 						<li class="navbarli"><a href=<?php if(isset($linkclaimpage)) { echo $linkclaimpage; } else { echo "#"; } ?> class="nav">Frequently Asked Questions</a></li>
                							<li class="navbarli"><a href=<?php if(isset($linkclaimpage)) { echo $linkclaimpage; } else { echo "#"; } ?> class="nav">Blog</a></li>
                							<li class="navbarli"><a href=<?php if(isset($linkclaimpage)) { echo $linkclaimpage; } else { echo "#"; } ?> class="nav">Contact</a></li>
            							</ul>
      							</div>

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Ah, I see what you were you trying to do now.

    The reason they were displaying down the page is because you had display: block on the links.

    It can be done easier using display: inline; on the list items.
    Because everything is now inline text-align: center on the ul will center everything.
    line-height can be used to vertically center the links.
    Code:
    .navbarul {
      list-style: none;
      margin: 0;
      padding: 0;
      text-align: center;
    }
    .navbarul li {
      display: inline;
    }
    .navbarul a {
      background: #6499C1;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
      height: 30px;
      line-height: 30px;
      padding: 6px 15px;
      text-decoration: none;
      text-transform: uppercase;
    }
    All the best,

  5. #5
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm I copied what you have given me here such that my code looks like the below but its still causing the same issue. Without defining the width each button is becoming 100% of the width available.
    Code CSS:
    /*Navigation Bar*/
    ul.navbarul{list-style: none;
      margin: 0;
      padding: 0;
      text-align: center;}
    li.navbarli{display: inline}
     
    a.nav:link,a.nav:visited
    	{background: #6499C1;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
      height: 30px;
      line-height: 30px;
      padding: 6px 15px;
      text-decoration: none;
      text-transform: uppercase;}

    Ugh, this is giving me a headache.

  6. #6
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I know in the HTML Code above, the elements have the proper classes , but in the HTML that you pasted the css code in the post right above this, the one with the disaplay:inline;, does that have the proper classes?

    Otherwise, i can not see why display:inline; would not work. Could younattach and post screenshots of what you are seeing in the different browsers?

    Best of luck,
    Team 1504

  7. #7
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well this is my menu in Chrome


    And IE



    I should make clear that the rest of the menu in IE is there but its hidden because the box height is set to 30px, its there in list form.

    The code given to me by MarkBrown is achieving the right thing but like the code I had before, UNLESS I set the width, each menu option is taking up 100% of the width unlike Chrome/Firefox where its just taking up enough space to cover the link.

    My HTML is unchanged from what I initially posted so its just something that is making the buttons 100% in IE. I can specify a width but that isn't workable as some buttons need to be bigger than others.

  8. #8
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gah, this is driving me insane. I don't understand where the width of these Li items is coming from. Even if I set the height to specific pixel width this bar still manages to think that it deserves to dedicate 100% of the width to one button.

    I really hate IE.

  9. #9
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by darkwarrior View Post
    Gah, this is driving me insane.
    I really hate IE.
    Dont we all say that one or multiple times in our web design endeavours...


    Hmm since the widtgs of the <li> tags are messed up in Ie, try adding This the very end of the head of your page. (Right before the </head>)
    nevermind I was going to show you conditional comments for ie where the width of the li are styled in css inside the conditional commend and overwrote all other styling for the width of the li 's using !important

    So
    <!--[if IE]><style> li{ width: /* what you want the width of the li to be in ie*/ !important;</style><!--[endif ]>

    But then I realised that the different li had different widths.
    And then I thought if in ie the width of the <li> are 100% then how about containing each in its own div with a styled width per how big the kind needs to be.

    Im going to head off to sleep but I will post an example of what I am talking about in code tomorrow

  10. #10
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    So how about something like this:
    HTML Code:
    <!Doctype HTML>
    <html lang="en">
    <head>
    <!-- All The things that were originally in the head go here-->
    <style>
    ul.navbarul div{
    height:30px;
    }
    ul.navbarul div li{
    width:100%;
    }
    ul.navbarul div#claim {
    width:/*width of start a claim li */;
    }
    ul.navbarul div#services{
    width:/*width of our services li */;
    }
    ul.navbarul div#consempation{
    width:/*width of consempation li */;
    }
    ul.navbarul div#faq{
    width:/*width of faq li */;
    }
    ul.navbarul div#blog
    width:/*width of blog li */;
    }
    ul.navbarul div#contact
    width:/*width of contact li */;
    }
    </style>
    </head>
    <body>
    <!-- body HTML -->
    <ul class="navbarul">
    <div id="claim">
    <li><a href="#">Start a claim</a></li>
    </div>
    <div id="services">
    <li><a href="#">Services</a></li>
    </div>
    <div id="consempation">
    <li><a href="#">Consempation</a></li>
    </div>
    <div id="faq">
    <li><a href="#">Frequently Asked Questions</a></li>
    </div>
    *<div id="blog">
    <li><a href="#">Blog</a></li>
    </div>*
    <div id="contact">
    <li><a href="#">Contact</a></li>
    </div>*
    </ul>
    
    <!-- other body stuff -->
    </body>
    </html>
    So what it is that each element of your navigation is position inside it's own div tag. You can style each div tag to have the desired width of each item.
    The li's in the ul with the class navbarul are told to take a width of a 100% which occurs regardless of browser. But they are contained by the width of the div that contains them

    I think that should work. Sorry if my coding is wrong or i made some mistakes, but it is late and i did not get any *good sleep last night *
    Please let me know if you have any questions and I hope this helps you be able to set widths to each of the specific items of your navigation without styling the li's as they somehow take on the styling of 100% in your original document when ran in ie.

    Hope this helps,
    Team 1504

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The reason the navlinks stretch to 100% in IE6 is because the parent list is a widthless float and due to a bug in IE6 child elements in haslayout mode will stretch the parent float to 100% of the available width.

    The solution is simple and just requires that you float the anchor also.

    I would also remove the padding top and bottom from the anchor and use line-height to center it.

    e.g.

    Code:
    a.nav:link, a.nav:visited {
        font-size:14px;
        /*display:block;*/
        float:left;
        text-align:center;
        height:30px;
        font-weight:bold;
        color:#FFFFFF;
        background-color:#6499c1;
        text-decoration:none;
        text-transform:uppercase;
        padding:0 15px;
        line-height:30px;
    }
    Note that you have also included a whole CSS file for all versions of IE which is complete nonsense.

    You should only include the changed rules and not the whole file as that makes maintenance a nightmare as you don't know what rules have changed. The file should only be a few lines long at most otherwise you are doing something badly wrong.

    It should only be given to specific versions of IE and not all IE anyway as IE7 and upwards don;t have the same bugs as iE6 (in most cases.)

    Lastly the IE stylesheet should follow after the main stylesheet and not before it because it simply gets overwritten in the cascade anyway by the newer styles.

    Remove the IE file completely and start again. Add only rules for IE6 and only add the rules that are needed. I have no idea what you changed as the file is too big to look through but I deleted the whole thing and it seems to work ok.

    This would be for ie6 and below (less than IE7):

    Code:
    <!-- main stylesheet first -->
    <link href="style.css" rel="stylesheet" type="text/css" />
    <!-- now add the changes only to the ie6 file and not the whole css file -->
    <!--[if lt IE 7]>
    <link href="IEStyle.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    Your left and right floats have the double margin bug in IE6 so add display:inline to squash it.

    Code:
    .contentleft,.contentright{display:inline}
    This is very bad.
    Code:
    <div class="contentrightheader">
      <p class="sidebarheader">What is my claim worth?</p>
    </div>
    If it's a header (and it certainly looks like it because you have wrapped it enough classes with the word header applied) then you should use a heading tag at the appropriate level.

    You could just use:
    Code:
    <h3 class="sidebarheader">What is my claim worth?</h3>
    You don't need the extra div either as all can be styled in one go anyway. You can probably lose the class as well if all headers are styled the same in that section.

    This section should be a list (or possibly a table.)

    Code:
        <div class="claimamount">
                                <div class="claimamountleftalt">
                                    <p class="claimtextalt">Ankle Injuries</p>
                                </div>
                                <div class="claimamountrightalt">
                                    <p class="claimtextalt"> Up to &pound;32,000</p>
                                </div>
                                <div class="claimamountleft">
                                    <p class="claimtext">Knee Injuries</p>
                                </div>
                                <div class="claimamountright">
                                    <p class="claimtext">Up to &pound;61,500</p>
                                </div>
                                <div class="claimamountleftalt">
                                    <p class="claimtextalt">Facial Injuries</p>
                                </div>
                                <div class="claimamountrightalt">
                                    <p class="claimtextalt"> Up to &pound;62,000</p>
                                </div>
                                <div class="claimamountleft">
                                    <p class="claimtext">Neck Injuries</p>
                                </div>
                                <div class="claimamountright">
                                    <p class="claimtext">Up to &pound;95,000</p>
                                </div>
                                <div class="claimamountleftalt">
                                    <p class="claimtextalt">Back Injuries</p>
                                </div>
                                <div class="claimamountrightalt">
                                    <p class="claimtextalt">Up to &pound;108,000</p>
                                </div>
                                <div class="claimamountleft">
                                    <p class="claimtext">Hand Injuries</p>
                                </div>
                                <div class="claimamountright">
                                    <p class="claimtext">Up to &pound;129,000</p>
                                </div>
                                <div class="claimamountleftalt">
                                    <p class="claimtextalt">Paralysis</p>
                                </div>
                                <div class="claimamountrightalt">
                                    <p class="claimtextalt">Up to &pound;257,750</p>
                                </div>
                                <p class="disclaimer">Compensation amounts extracted from JSB version 9.  Total amount depends on severity of injury.</p>
                            </div
    That's divitis gone mad and has no semantic meaning at all.

    It should be something like this.

    Code:
    <h3 class="sidebarheader">What is my claim worth?</h3>
    <div class="contentrightdetail">
        <ul class="claimamount">
            <li class="alt"><strong>Ankle Injuries</strong><span> Up to &pound;32,000</span></li>
            <li><strong>Knee Injuries</strong><span> Up to &pound;61,500</span></li>
            <li class="alt"><strong>Face Injuries</strong><span> Up to &pound;62,000</span></li>
            <li><strong>Neck Injuries</strong><span> Up to &pound;95,500</span></li>
            <li class="alt"><strong>Back Injuries</strong><span> Up to &pound;108,000</span></li>
            <li><strong>Hand Injuries</strong><span> Up to &pound;9129,000</span></li>
            <li class="alt"><strong>Paralysis</strong><span> Up to &pound;257,750</span></li>
            <li class="disclaimer">Compensation amounts extracted from JSB version 9.  Total amount depends on severity of injury.</li>
        </ul>
    </div>
    (You don't really need the contentrightdetail div either in the above)

    It can all be styled without all those extra classes.
    Code:
    h3.sidebarheader {
        background:#6499C1;
        color: #FFFFFF;
        font-size: 1.3em;
        font-weight: bold;
        padding: 3px 0;
        text-align: center;
        text-transform: capitalize;
        margin:0 0 5px;
    }
    .claimamount {
        width:100%;
        clear:both;
        margin:0;
        padding:0;
        list-style:none;
    }
    .claimamount li {
        background:#fff;
        width:100%;
        overflow:hidden;
        line-height:35px;
        color: #777777;
        font-size: 1.1em;
        font-weight: bold;
        text-align: right;
    }
    .claimamount strong {
        width:49%;
        float:left;
    }
    .claimamount span {
        width:49%;
        float:right;
        padding:0 1% 0 0;
    }
    
    .claimamount li.alt {
        background:#5983a3;
        color:#fff;
    }
    .claimamount li.disclaimer {
        font-size: 9px;
        text-align: left;
        line-height:normal;
        font-weight:normal;
        padding:2px 0;
    }
    This should be in a list structure as it is clearly a list because you have numbered it.

    Code:
    1<img src="http://workclaims.mediaxombie.com/images/logo2.jpg" /></img> <br/>
                        2<img src="http://workclaims.mediaxombie.com/images/logo3.png" /></img> <br/>
                        3<img src="http://workclaims.mediaxombie.com/images/logo4.jpg" /></img> <br/>
                        4<img src="http://workclaims.mediaxombie.com/images/logo5.png" /></img> <br/>
                        5<img src="http://workclaims.mediaxombie.com/images/logo6.png" /></img> <br/>
                        6<img src="http://workclaims.mediaxombie.com/images/logo7.png" /></img> <br/>
                        7<img src="http://workclaims.mediaxombie.com/images/logo8.png" /></img> <br/>
                        8<img src="http://workclaims.mediaxombie.com/images/logo9.png" /></img>
    The image is a self closing tag so you don't add </img>.

    Don't use breaks to make space and don't use negative margins when you are using them just because you forgot to address the default margins on elements. Otherwise you will get overlaps as you have in IE6. Some browsers add a default top margin to elements and some like IE7 and under don't which means you have to explicitly control the top and bottom margins yourself on all your headings and paragraphs and uls etc.

    That's enough to be going on with for now but you should always look to use the most semantic element possible for the job in head and not just a div for everything. Don't add extra divs when none are needed.

  12. #12
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Ok, what we have here is a PERFECT example of what I mean when I talk about DIV and classes for NOTHING. What makes me say this? Simple, if every single LI inside a classed UL is getting the same class, they don't need classes on them! if every single anchor inside a classed ul is getting the same class, they don't need classes on them!!!

    It's called inheritance.

    Likewise looking at the layout on the page the Div.navbar serves absolutely no good purpose; or at least does nothing that couldn't be done to the UL directly.

    Finally, constantly dropping in/out of php parsing mode just results in slow, bloated, hard to follow code, so that should be gutted as well... even sillier is dropping out to an IF to do an echo... You should REALLY stop using double quotes in your php so the code runs faster, you can make the server side code AND markup clearer to read/easier to maintain since you can get white space preservation in your output, and so you can put double quotes in the markup. Also, this isn't HTML 3.2, you should have quotes around ALL values, not just some.

    Oh, and there's also NO reason to be bothering to say UTF-8 on your CSS since valid CSS is inherently ASCII7 only... meaning the character encoding doesn't matter since EVERYTHING other than UTF-16 has ASCII7 as a subset.

    Code:
    echo '
    	<ul class="mainMenu">
    		<li><a href="',(
    			isset($linkclaimpage) ? $linkclaimpage : '#'
    		),'">Start A Claim</li>
    		<li><a href="',(
    			isset($linkclaimpage) ? $linkclaimpage : '#'
    		),'">Our Services</li>
    		<li><a href="',(
    			isset($linkclaimpage) ? $linkclaimpage : '#'
    		),'">Compensation</li>
    		<li><a href="',(
    			isset($linkclaimpage) ? $linkclaimpage : '#'
    		),'">FAQ</li>
    		<li><a href="',(
    			isset($linkclaimpage) ? $linkclaimpage : '#'
    		),'">Blog</li>
    		<li><a href="',(
    			isset($linkclaimpage) ? $linkclaimpage : '#'
    		),'">Contact</li>
    	</ul>';
    Should be all you need to be doing in your php for markup.

    Now, MOST of your problem likely comes from putting the float on the LI -- this is NEVER reliable and should generally be avoided unless doing cascading menus. It's a lot simpler to just set them to display:inline to remove them from block-level flow, and then just deal with the anchors for positioning -- NOT that I'd be trying to use relative positioning on them which is ALSO part of what's causing your headaches - text-align:center and inline-block would likely be much better behaved... and there should be no reason to be saying :link and :visited when the parent property will set those.

    Also, condensing your properties down to one line is likely why you keep re-declaring the same values over and over again for no good reason in your CSS file. NEVER understood the obsession with doing that. I would also advise restating the face and line-height so that you are 100% sure it's set properly -- thankfully condensed properties make that take no more code than the separated ones you are using -- Id' ALSO avoid declaring a height and let padding and line-height add up to the desired size... and if you set just "A" instead of ":link" and ":visited" you won't have to restate the white color on the hover states... or the font-size, or the height you shouldn't be declaring in the first place.

    Code:
    #mainMenu {
    	list-style:none;
    	text-align:center;
    	background:#6499c1;
    }
    
    #mainMenu li {
    	display:inline;
    }
    
    #mainMenu a {
    	display:-moz-inline-block;
    	display:-moz-inline-box;
    	display:inline-block;
    	padding:8px 30px;
    	text-decoration:none;
    	text-transform:uppercase;
    	font:bold 14px/16px arial,helvetica,sans-serif;
    	color:#FFF;
    	background:#69C;
    }
    
    #mainMenu a:active,
    #mainMenu a:focus,
    #mainMenu a:hover {
    	background:#58A;
    }
    Might have to play with the side padding to compensate for the extra space between the inline-level elements.

    Looking at the full page -- it's riddled with bloated code that's bound to cause headaches cross browser. I'm actually a little shocked it renders consistently between Opera and FF. I mean simple things like:

    <div class="contentleftheader"><p class="contentheader">no win no fee solicitors</p></div>

    Inner class for nothing, that's NOT a paragraph so why is it marked up as a paragraph and not as a numbered heading tag?!??

    <!-- START HEADER -->
    <div class="header">
    <div class="logo"><a href="index.php"><img src="images/logo8.png" alt="cash4aCLAIM.com"></a></div>

    The comment placements in your document are probably tripping IE6 rendering bugs, given the layout there is NO reason for that DIV#header to even exist, DIV#logo should probably be the parent H1 tag (since no other heading on the page would make a good master) with TEXT inside it and a image replacement technique on it, since that image is PRESENTATIONAL in nature and as such has no place in the markup... Then there's the broken form after (no block level internal wrapper, 'for' needs to point at an ID, the stuffed keywords meta that's likely being ignored by search engines (should be 8-9 words in 80 characters or LESS!), pointless TITLE meta, IE conditional nonsense with no media types on the CSS, static scripting in the markup, paragraphs around non-paragraph elements, double breaks doing paragraph's job, total lack of logical document structure/headings, etc, etc...

    This is a NEW site, right? If so, why is it a tranny? Transitional is for supporting old/outdated/half-assed coding techniques where you're basically writing HTML 3.2 and slapping a doctype on it -- it is NOT for building new pages.

    Bottom line, CSS is only as good as the markup it is applied to, and this markup is, well... It needs to be thrown away and started over using semantic markup, separation of presentation from content, and a whole lot less classes.

    Apart from the scripting, there's not a whole lot of reason for the markup you have for that page to be much more than:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <meta
    	name="description"
    	content="Cash4aClaim are legal representatives who aim to secure you financial compensation for injuries that were not your fault and you keep 100% of the compensation!"
    />
    
    <meta
    	name="keywords"
    	content="injury,solicitor,personal,claim,work,accident,whiplash,free"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Accident Claims - Cash4aCLAIM.com
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    	<div class="borderTop"></div>
    	
    	<h1>
    		Cash4aClaim
    		<span></span>
    	</h1>
    	
    	<form method="post"
    		action="callbackthankyou.php"
    		id="callbackform"
    	>
    		<fieldset>
    			<label for="callbackname">Name:</label>
    			<input
    				type="text"
    				name="callbackname"
    				id="callbackname"
    				maxlength="25"
    			/><br />
    			
    			<label for="callbackno">Contact Number:</label>
    			<input
    				type="text"
    				name="callbackno"
    				id="callbackno"
    				maxlength="11"
    			/><br />
    			
    			<input type="submit"
    				name="callbacksubmitted"
    				value="Call Me Back"
    				class="submit"
    			/>
    		</fieldset>
    	</form>
    	
    	<ul id="mainMenu">
    		<li><a href=claim.php>Start A Claim</a></li> 
    		<li><a href=services.php>Our Services</a></li>
    		<li><a href=compensation.php >Compensation</a></li> 
    		<li><a href=faq.php>Frequently Asked Questions</a></li>
    		<li><a href=blog.php>Blog</a></li>
    		<li><a href=contact.php>Contact</a></li>
    	</ul>
    	
    	<div id="columnWrapper">
    	
    		<div id="content">
    			<img
    				src="images/homeBanner.png"
    				alt="Make a Claim Today and Recieve Up to &pound;200 Cash!*"
    				class="banner"
    			/>
    			
    			<h2>no win no fee solicitors</h2>
    			<p>
    				Have you been the victim of an accident and left with no support or compensation?	That's where Cash4aClaim comes in!	We are a dedicated and trained team of legal specialists, based in the North West, who want to provide you with the support and help you need to get the compensation you deserve on a <strong>No Win, No Fee</strong> basis where you keep <strong>100% of the compensation!</strong>
    			</p><p>
    				Cash4aClaim are experienced representatives in matters of personal injury from road and traffic accidents, slips, trips, falls and injuries and accidents in the workplace meaning you are always getting the best support in your case.	In fact we are so certain that we can get you suitable compensation that we guarantee you 100% of the compensation with Cash4aClaim recovering all costs from the other side.  You keep <strong>ALL THE COMPENSATION</strong> plus we at Cash4aClaim give you an extra <strong>200</strong> just for using us in your case!	So that's...
    			</p>
    			
    			<ul class="arrowheads">
    				<li>
    					100% of your compensation, <strong>GUARANTEED</strong>.
    				</li><li>
    					<strong>200* BONUS CASH</strong> on top of any compensation paid, just for using us!
    				</li><li>
    					All costs recovered from the other side!
    				</li>
    			</ul>
    			
    			<h2>Maximum Payout</h2>
    			<p>
    				Cash4aClaim strive to get you the maximum payout for your injury whatever it may be with compensation ranging from 800 to <strong>250,000!</strong>.  The total amount payable ultimately depends on the type and severity of your injury and the circumstances of your accident but we always aim to get you a <strong>Maximum Payout</strong> for your peace of mind.
    			</p><p>
    				It's our duty to make sure the compensation you receive covers the cost not only of your physical injury but the discomfort and inconvenience it has caused you and any financial damages you have incurred.<br/> <br/>We deal with your case promptly every time and make sure you always stay informed on our progress.
    			</p>
    			
    			<h2>Start your claim today</h2>
    			<p>
    				So are you a victim of an accident that wasn't your fault?  Are you currently suffering from an injury or have you suffered an injury in the past and do you believe you deserve compensation?  Then take the first step to getting compensation you deserve and justice you need by simply completing our <a href=claim.php >free, no obligation form</a>.	It takes less than a minute and we will aim to get in contact with you as soon as possible!  It really is that easy to get on the ladder to getting significant compensation for your pain!
    			</p><p>
    				We won't force you to pursue a case if you change your mind, the case is all about you and we are here to make sure the process is as simple and straight-forward as possible so get in touch today.
    			</p>
    			
    			<h2>Latest Compensation News</h2>
    			<p>
    				Some legal news can go here
    			</p>
    		<!-- #content --></div>
    		
    		<div class="sideBar">
    			</h2>
    			<table class="claimWorth">
    				<caption>What is my claim worth?</caption>
    				<thead>
    					<tr>
    						<th>Injury</th>
    						<th>Up To</th>
    					</tr>
    				</thead>
    				<tbody>
    					<tr>
    						<th>Ankle</th>
    						<td>&pound;999</td>
    					</tr><tr class="even">
    						<th>Knee</th>
    						<td>&pound;999</td>
    					</tr><tr>
    						<th>Ankle</th>
    						<td>&pound;999</td>
    					</tr><tr class="even">
    						<th>Ankle</th>
    						<td>&pound;999</td>
    					</tr><tr>
    						<th>Ankle</th>
    						<td>&pound;999</td>
    					</tr><tr class="even">
    						<th>Ankle</th>
    						<td>&pound;999</td>
    					</tr><tr>
    						<th>Ankle</th>
    						<td>&pound;999</td>
    					</tr>
    				</tbody>
    			</table>
    			<p class="disclaimer">
    				Compensation amounts extracted from JSB version 9.	Total amount depends on severity of injury.
    			</p>
    			
    			<a href="claim.php" title="Start Your Claim Now" class="startAClaim">
    				Start Your Claim Now<span></span>
    			</a>
     
    			<h2>What our clients say...</h2>
    			<blockquote>
    				<p>
    					"I fell into an unmarked hole that some council workmen had dug, slamming my chest and arm against concrete and trapping my leg.	Cash4aClaim managed to secure 36,000 in compensation which I was fairly chuffed at.	Would definitely do business with them again."
    				</p>
    				<img src="images/test4.png" class="trailingPlate" />
    				<p>
    					<cite>Public Works Injury (2010)<br/>Mr R, Ashton</cite>
    				</p>
    			</blockquote>
    		
    		<!-- #sideBar --></div>
    		
    	<!-- #columnWrapper --></div>
    	
    	<div id="footer">
    		<ul>
    			<li><a href="index.php">Home</a></li>
    			<li><a href=claim.php class="footer">Claim Now</a></li>
    			<li><a href=faq.php class="footer">F.A.Q.</a></li>
    			<li><a href=about.php class="footer">About</a></li>
    			<li><a href=contact.php class="footer">Contact</a></li>
    			<li><a href=legal.php class="footer">Legal Notice</a></li> 
    			<li><a href="http://www.webexposure.co.uk"class="footer">SEO Design</a></li>
    		</ul>
    		&copy; cash4aCLAIM.com 2010 | Web Exposure Design
    	<!-- #footer --></div>
    	
    	<div class="borderBottom"></div>
    <!-- #pageWrapper --></div>
    	
    <p class="footerDisclaimer">
    	*Payment made only upon successful conclusion of your claim following the verification and commencement of action against a third party insurer/organisation/individual leading to payment of compensation. We will then pay you up to an additional &pound;200 for using cash4aclaim as your legal representative.
    </p>
    
    </body></html>
    If I have time later I'll toss together the CSS for that to show you what I mean.

  13. #13
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, ok, a lot to look through here. I'll see what I can do and get back to you all.

    I started wrapping things in DIVs because I had issues where things were stretching to too large a size or changing position.

    EDIT: I'm not sure whats different between your css and Marks, but it seeems to be working now. But I'm going to try and overhaul my code based on all of your suggestions, Death, Paul, Team and Mark.

    As for the doctype, I don't know about that stuff, thats just what Dreamweaver puts in when you create a new HTML document. Its been like 8 years since I last built a website so rusty isn't even getting into it. But I'm already learning a lot from you guys.

  14. #14
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I apologise for adding even more div to the page.
    When I skimmed through Paul & deathShadow 's posts many of the things made sense.
    i think that because it was late, I completely forgot about floating the anchors.

    I am going to take a detailed look at your posts and although this is not a thread I started, thank you very much for helping

  15. #15
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I have fixed the navigation bar but I had to put it back in a div because outside of it the background colour (The blue) was spreading up behind the form and the logo. I also need to fix the form because its styling has disappeared for some reason. Made a few tweaks to the links you suggested as well to cut down on it switching back and forth between HTML and PHP.

    Got rid of ContentHeader (Which is what I think the larger content area was called) and replaced it with H2 stylised though need to fix the top one as its stretching for some reason.

    Will continue and see where I get.

  16. #16
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Here's that rewrite I mentioned:

    http://www.cutcodedown.com/for_other.../template.html

    as with all my examples the directory:

    http://www.cutcodedown.com/for_others/darkwarrior

    Is wide open for easy access to the CSS and images. (which I remastered a bit for sizes to get it down around 70k total).

    Tested working IE 6 through 9 beta, Opera 10.5 and 11, FF 2 and 3.6, and the latest flavors each of Safari and Chrome. The page also works after a fashion in IE 5.5 (only real issue is the hover button in the sidebar isn't centered -- oh noes!). Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for a few browser specific properties (zoom for IE and -moz for FF 2).

    Which nicely guts down the markup to 7k and cuts the CSS down to 5k... which is more in-line with what should be there given the content.

    Hope this helps, or at least gets you thinking on simplification. Really I think that's a lot of the problem is you've over-thought your code.

  17. #17
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, I cant believe you knocked that together so fast. Am investigating now.

    Can I just ask, is this "font:bold 18px/120% " a shorthand for:

    Font-weight
    Font-size
    and Line height?

    Just want to know for the future.

    And thanks for that Deathshadow.

  18. #18
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    EDIT: Nevermind, I get that part.

    As a Sidenote, I personally put everything in the CSS on a single line for neatness but as I was going through it I noticed, like you, repeated or defunct attributes. That format really does make it hard to read.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by darkwarrior View Post
    EDIT: Nevermind, I get that part.

    As a Sidenote, I personally put everything in the CSS on a single line for neatness
    That makes it impossible to scan single rules quickly and makes editing a nightmare.

    I always format the css rules much like Jason above:

    Code:
    .test {
      color:red;
      background:#fff;
      font-size:140%;
    }
    Of course a lot of this is down to personal preference but it seems that those who work with css a lot prefer it as above. It's easier to edit, copy, paste and scan.

  20. #20
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That makes it impossible to scan single rules quickly and makes editing a nightmare.

    I always format the css rules much like Jason above:

    Code:
    .test {
      color:red;
      background:#fff;
      font-size:140%;
    }
    Of course a lot of this is down to personal preference but it seems that those who work with css a lot prefer it as above. It's easier to edit, copy, paste and scan.
    No he's right, I do see the benefit of it now. It looked neater but I hadn't had to re-read it in-depth like I am doing at the minute, its much easier to read with each element on its own line.

  21. #21
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok so this is what I have. Obviously I have to go through the other pages and update some things but this is me implementing Deaths excellent work as best I can. There are some odd visual(mostly size) differences like the spacing between menu options that I don't know the source of but it looks pretty much the same as my prior design, just sans all those pesky divs. And for some reason while death was able to put my banner in the columnwrapper without issue, mine applied the margin to it as well as the content below so there was an 8px margin on either side of it. Couldn't figure out why as my code looked almost verbatim to Deaths so I worked around it. And a bizarre glitch Im trying to figure out that is only appearing in Chrome/Firefox where the link at the top is pointing to SELF instead of hte index. Works fine in IE for whatever reason.

    Still need to do some stuff and figure out why the button styling isn't working and cut a bunch of stuff from my CSS file but Im happy with it.

    I think Death left out all the form styling on purpose because its not cross-browser but the guy I'm doing it for wanted it to pop compared to the rest of the page.
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"> 
    <head> 
    <meta 	http-equiv="Content-Type" 
    		content="text/html; charset=utf-8"/> 
     
    <meta
    	http-equiv="Content-Language"
    	content="en"/> 
     
    <meta  name="description" content="cash4aClaim are legal representatives who aim to secure you financial compensation for injuries that were not your fault and you keep 100% of the compensation!"/> 
    <meta  name="keywords" content="injury,solicitor,personal,claim,work,accident,whiplash,free" /> 
     
    <link href="style.css" rel="stylesheet" type="text/css" media="screen,projection,tv"/> 
    <!--[if lt IE 7]>
    <link href="IEStyle.css" rel="stylesheet" type="text/css" />
    <![endif]--> 
     
    <title> 
    	Accident Claims | Cash4aCLAIM.com
    </title> 
     
    <!--Include JavaScript--> 
    <script type="text/javascript"> 
     
     
    function showHide(shID) {
      var e,i;
      var PID = "basiccontainer"; // the id of the parent element
      var p = document.getElementById(PID); // parent element
      // loop through each of the childNodes of the parent element
     
      for (i=0; i<p.childNodes.length; i++) {
         e = p.childNodes[i];
        if (e.nodeType!=1) continue; // pass over non-element nodes
        if (e.getAttribute("id") == shID) {
          e.style.display = "block";
        }
        else {
          e.style.display = "none";
        }
      }
    }
     
     
    function OpenPopup (c) {
    window.open(c,
    'window',
    'width=480,height=480,scrollbars=yes,status=yes');
    }
    function validate_required(field,alerttxt)
    {
    with (field)
      {
      if (value==null||value=="")
        {
        alert(alerttxt);return false;
        }
      else
        {
        return true;
        }
      }
    }
     
    function validate_form(thisform)
    {
    with (thisform)
      {
      if (validate_required(callbackname,"Please provide a contact name!")==false)
      {callbackname.focus();return false;}	  
      if (validate_required(callbackno,"Please provide a contact number!")==false)
      {callbackno.focus();return false;}
      }
    }
    </script> 
    </head> 
    <body> 
     
    <!--START MAIN--> 
    <div id="pageWrapper"> 
    	<h1> 
    		<a href=""> Cash<span>4a<span>Claim<span></span></span></span></a> 
    	</h1> 
                                	<!-- CALL BACK FORM --> 
                                    <form method='post' 
                                    		action='callbackthankyou.php' 
                                            id="callbackform" 
                                            onsubmit='return validate_form(this)'
                                     > 
                                     	<fieldset> 
     								  <label for='callbackname' class='labelmini'>Name:</label> 
                                                <input type='text'
                                                		name='callbackname' 
                                                        class='fieldsmini' 
                                                        maxlength='25' 
                                       /><br /> 
     								  <label for='callbackno' class='labelmini'>Contact Number:</label> 
                                                <input type='text' 
                                                		name='callbackno' 
                                                        class='fieldsmini'
                                                        maxlength='11'  
                                      /><br /> 
    								  <input type='submit' 
                                      			name='callbacksubmitted' 
                                                value='Call Me Back' 
                                                class='button'
                                       /> 
                                      </fieldset> 
    								</form> 
     
      									<ul id="mainMenu"> 
            								<li><a href="claim.php">Start A Claim</a></li> 
               								<li><a href="services.php">Our Services</a></li> 
               		 						<li><a href="compensation.php">Compensation</a></li> 
               		 						<li><a href="faq.php">Frequently Asked Questions</a></li> 
                							<li><a href="blog.php">Blog</a></li> 
                							<li><a href="contact.php">Contact</a></li> 
            							</ul>    				<!-- END HEADER --> 
     
        				<!-- START BODY --> 
                        <div id="contentWrapper"> 
     
                            	<img
    								src="images/banner4.jpg"
    								alt="Make a Claim Today and Recieve Up to &pound;200 Cash!*"
    								class="banner"
    							/> 
     
    								<div id="content"> 
    <!--*****************************ALL CONTENT INCLUDES GOES BELOW*********************************************************************************************************************************** ****************************************************************************************************************************************************************************************** --> 
     
                   <h2>no win no fee solicitors</h2> 
                                       	  <p>Have you been the victim of an accident and left with no support or compensation?  That's where Cash4aClaim comes in!  We are a dedicated and trained team of legal specialists, based in the North West, who want to provide you with the support and help you need to get the compensation you deserve on a <strong>No Win, No Fee</strong> basis where you keep <strong>100% of the compensation!</strong></p> 
                                          <p>Cash4aClaim are experienced representatives in matters of personal injury from road and traffic accidents, slips, trips, falls and injuries and accidents in the workplace meaning you are always getting the best support in your case.  In fact we are so certain that we can get you suitable compensation that we guarantee you 100% of the compensation with Cash4aClaim recovering all costs from the other side.  You keep <strong>ALL THE COMPENSATION</strong> plus we at Cash4aClaim give you an extra <strong>200</strong> just for using us in your case!  So that's...</p> 
     
                                                    <ul class="arrowheads"> 
                                                    	<li> 
    														100% of your compensation, <strong>GUARANTEED</strong>.
    													</li><li> 
    														<strong>&pound;200* BONUS CASH</strong> on top of any compensation paid, just for using us!
    													</li><li> 
    														All costs recovered from the other side!
    													</li> 
    												</ul> 
     
    												<hr />                                                        
     
     
                   <h2>Maximum Payout</h2> 
                                       	  <p>Cash4aClaim strive to get you the maximum payout for your injury whatever it may be with compensation ranging from 800 to <strong>250,000!</strong>.  The total amount payable ultimately depends on the type and severity of your injury and the circumstances of your accident but we always aim to get you a <strong>Maximum Payout</strong> for your peace of mind. <br/> <br/>It's our duty to make sure the compensation you receive covers the cost not only of your physical injury but the discomfort and inconvenience it has caused you and any financial damages you have incurred.<br/> <br/>We deal with your case promptly every time and make sure you always stay informed on our progress.</p> 
     
                   									<hr /> 
     
                  <h2>Start your claim today</h2> 
                                       	  <p>So are you a victim of an accident that wasn't your fault?  Are you currently suffering from an injury or have you suffered an injury in the past and do you believe you deserve compensation?  Then take the first step to getting compensation you deserve and justice you need by simply completing our <a href=claim.php >free, no obligation form</a>.  It takes less than a minute and we will aim to get in contact with you as soon as possible!  It really is that easy to get on the ladder to getting significant compensation for your pain!<br/><br/>We won't force you to pursue a case if you change your mind, the case is all about you and we are here to make sure the process is as simple and straight-forward as possible so get in touch today.</p> 
     
                   									<hr /> 
     
                   <h2>Latest Compensation News</h2> 
                                       	  <p>Some legal news can go here</p> 
     
                 										<hr /> 
    1<img src="images/logo2.jpg" /></img> 
    <br/> 
    2<img src="images/logo3.png" /></img> 
    <br/> 
    3<img src="images/logo4.jpg" /></img> 
    <br/> 
    4<img src="images/logo5.png" /></img> 
    <br/> 
    5<img src="images/logo6.png" /></img> 
    <br/> 
    6<img src="images/logo7.png" /></img> 
    <br/> 
    7<img src="images/logo8.png" /></img> 
    <br/> 
    8<img src="images/logo9.png" /></img> 
     
     
    <!--*****************************ALL CONTENT INCLUDES GO ABOVE*********************************************************************************************************************************** ****************************************************************************************************************************************************************************************** -->					  			                              
                                    </div> 
     
                                    <!--CONTENT RIGHT --> 
                                    <div id="sideBar"> 
     
                                      <h3>What is my claim worth?</h3> 
                                            			<div class="claimamount"> 
                                                        		<div class="claimamountleftalt"><p class="claimtextalt">Ankle Injuries</p></div><div class="claimamountrightalt"><p class="claimtextalt"> Up to &pound;32,000</p></div> 
                                                        		<div class="claimamountleft"><p class="claimtext">Knee Injuries</p></div><div class="claimamountright"><p class="claimtext">Up to &pound;61,500</p></div> 
                                                        		<div class="claimamountleftalt"><p class="claimtextalt">Facial Injuries</p></div><div class="claimamountrightalt"><p class="claimtextalt"> Up to &pound;62,000</p></div> 
                                                        		<div class="claimamountleft"><p class="claimtext">Neck Injuries</p></div><div class="claimamountright"><p class="claimtext">Up to &pound;95,000</p></div> 
                                                        		<div class="claimamountleftalt"><p class="claimtextalt">Back Injuries</p></div><div class="claimamountrightalt"><p class="claimtextalt">Up to &pound;108,000</p></div> 
                                                        		<div class="claimamountleft"><p class="claimtext">Hand Injuries</p></div><div class="claimamountright"><p class="claimtext">Up to &pound;129,000</p></div> 
                                                        		<div class="claimamountleftalt"><p class="claimtextalt">Paralysis</p></div><div class="claimamountrightalt"><p class="claimtextalt">Up to &pound;257,750</p></div> 
                                                                <p class="disclaimer">Compensation amounts extracted from JSB version 9.  Total amount depends on severity of injury.</p> 
                                                         </div> 
     
     
                                          <a href="claim.php " title="Click Here To Start Your Claim" class="startAClaim"> 
                                          		CLICK HERE<br /><small>Start Your Claim Now!</small><span></span> 
                                          </a> 
     
     									<hr /> 
     
                          				<h3>What our clients say...</h3> 
                                        	<blockquote> 
    										 	<p> 
    												"Cash4ACLAIM got me fourteen-thousand pounds!!!  I suffered a bad case of whiplash in a car accident where someone slammed into the back of my Punto and the money certainly put a smile on my face!!"
                                                </p> 
                                             		<img src=images/test3.png class='testimg' />											<p> 
                                                	<cite>Road Traffic Accident (2010)<br/>Mr H, Oldham</cite> 
                                                </p> 
                                            </blockquote> 
                         				<hr /> 
     
               			  </div><!--End sideBar--> 
                          </div><!--End Content--> 
    							<div id="footer"> 
     					       			<div> 
     
    													<ul> 
                                          					<li>	<a href="index.php">Home</a></li> 
                                         					<li>	<a href="claim.php">Claim Now</a></li> 
                                                            <li>	<a href="faq.php">F.A.Q.</a></li> 
                                                            <li>	<a href="about.php">About</a></li> 
                                                            <li>	<a href="contact.php">Contact</a></li> 
                                                            <li>	<a href="legal.php">Legal Notice</a></li> 
                                                            <li class="last">	<a href="http://www.webexposure.co.uk"class="footer">SEO Design</a> 
                                                        </ul> 
    													        		    									Copyright &copy; cash4aCLAIM.com 2010 | Web Exposure Design
      			  						</div> 
     
           				  </div><!--End Footer--> 
        </div><!--End pageWrapper--> 
     
      <p id="footerDisclaimer"> 
      		*Payment made only upon successful conclusion of your claim following the verification and commencement of action against a third party insurer/organisation/individual leading to payment of compensation. We will then pay you up to an additional &pound;200 for using cash4aclaim as your legal representative.
      </p> 
     
     
    <!--END SHELL--> 
    </body> 
    </html>

  22. #22
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by darkwarrior View Post
    I think Death left out all the form styling on purpose because its not cross-browser
    Well that and you were using CSS3, which none of us have ANY real business using on a deployment website. After all, it's called "DRAFT" and not "Recommendation" for a reason -- and anyone telling you otherwise is packed so full of... Well, let's just say it's LITERALLY CSS2/IE5 all over again.

    Quote Originally Posted by darkwarrior View Post
    And for some reason while death was able to put my banner in the columnwrapper without issue, mine applied the margin to it as well as the content below
    If I were to take a guess, you probably started violating one of the rules I have about writing CSS - NEVER declare width or height the same time as padding and/or border in the same direction, and avoid margins unless you're left with no other choice. (which with the use of IMAGES for the gradients instead of the not ready for use on production websites CSS3 stuff...)

    Also, if you end up having to resort to this nonsense:
    Code:
    <!--[if lt IE 7]>
    
    <link href="IEStyle.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    FOR ANY REASON, you've IMHO been doing your compatibility ALL WRONG. There is no legitimate excuse to be using IE conditional comments for CSS -- EVER! That is something I would NEVER declare, just as I don't believe in using LINK to embed CSS without a MEDIA attribute.

    But to put that in perspective, I also refuse to put ANY fat bloated rubbish javascript library (like jquery or mootools) on ANY page on a site, I hate stupid animated garbage, and I won't even use javascript on forms anymore since it usually takes more time to load the stupid 200+k of scripted nonsense most people end up with than it does to just send the markup again -- especially when you STILL have to run all the same form checks server side.

    There's a lot of 'common practices' right now that I pretty much dump on from orbit as being bloated, wasteful, and just plain flushing good sites down the drain.

  23. #23
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lol, you're very passionate about the things you don't like.

    I took your suggestion, stripped the IE file bare. Its just there now to create a border. I liked your image but I changed the size of the container and so it wouldn't fit anymore and I didn't want to go through the hassle of making it look professional if I resized it. But it works for me and when IE9 comes out, hopefully it will just take my diffusion border like Chrome/FF have.

    I was under the impression, before your intervention, that if I told it to use a different CSS file it would only use that, that's why it was a full IE file. It was a pain.

    As for the banner. As far as I can tell, its almost exactly like yours. At least hte CSS i would've thought would be applicable to it.

    Yours:
    Code CSS:
    #columnWrapper {
    	overflow:hidden; /* wrap floats */
    	zoom:1; /* trip haslayout, wrap floats IE */
    	margin:0 8px;
    }
     
    #content {
    	float:left;
    	display:inline; /* prevent IE margin doubling */
    	width:600px;
    	padding-top:8px;
    	margin-left:8px;

    Mine:
    Code CSS:
    #contentWrapper {
    	overflow:hidden; /* wrap floats */
    	zoom:1; /* trip haslayout, wrap floats IE */
    	margin:0 0;}
    #content {
    	float:left;
    	display:inline; /* prevent IE margin doubling */
    	width:72%;
    	padding-top:8px;
    	margin:0 0.5em;}

    It'll be something small, not a huge thing, not something I'm going to stay up at night worrying over. Overall I'm just really impressed and thankful you were able to pull that together so fast and that it is compliant in so many browsers (Probably less so with the CSS3).

    Your CSS especially, theres a lot of forethought there (i.e. the merging of certain elements that have the same features) that I wouldn't think of when writing that code. Hopefully I will be able to get into that habit.

    EDIT: I didn't particularly want to use javascript, in fact I wanted to avoid it altogether. I probably still could, would just have to sacrifice some aesthetics for it.

  24. #24
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Oh, and there's also NO reason to be bothering to say UTF-8 on your CSS since valid CSS is inherently ASCII7 only...

    Would this also apply when I use a CSS declaration like content w/ UTF-8 content inside its commas?

    Or when I use a CSS attribute selector having UTF-8 values in its declaration?



    And yes, I know all it takes is to save the file with UTF-8 encoding, but like for HTML header/meta (let's say we have a "double step" process), maybe there is a need to it.

  25. #25
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    Would this also apply when I use a CSS declaration like content w/ UTF-8 content inside its commas?
    Which with the piss poor support for generated content and that if it's content what the devil is it doing in the CSS...

    Quote Originally Posted by noonnope View Post
    Or when I use a CSS attribute selector having UTF-8 values in its declaration?
    Ditto, Ditto....

    Can't rely on them for use, so shouldn't be using them. Goes back to my complaint about how maybe, just maybe BEFORE the browser makers waste all this time on screwing around with crap not even out of DRAFT they should get the decade old RECOMMENDATIONS implemented properly?

    But of course none of the missing bits are flashy enough for anyone to fix them. (see Colgroup, display:run-in, first-line, first-letter, etc)

    To put that in perspective though, there's a reason I don't use a lot of the fancy selectors -- which contributes to my small file sizes and simple/easy to maintain code. I still say if you need +, >, [attr], or worse ~, your markup and CSS is probably too convoluted for it's own good. Hell, the only real reason to use + or > is generally to get around the holes in Firefox's implementations of things like col/colgroup or to cover up ones lack of understanding of inheritance.

    It's the CSS equivalent of slapping classes on everything in the markup.


Bookmarks

Posting Permissions

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