Navbar issue in IE (Not Chrome/Firefox)

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.


<!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>

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.

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:


<!--[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.

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:


#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:

#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.

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.

Which with the piss poor support for generated content and that if it’s content what the devil is it doing in the CSS…

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.

I just wanted to pass along my thanks to everyone in this thread. I got a lot more help then I could ask for and learned more in this thread than from all the css tutorials I’ve been reading the last few weeks. I need to still tweak things for content on other pages but other than that I’m quite content and it looks very nice (IMO) now.

So thank you for the input, especially Death

Not arguing about that :slight_smile: But whether or not, if this possible scenario, no matter how wrong it may seem to some, will, in fact, exemplify why, in the first place, @charset exists? It seems I forgot about something: non-ASCII characters in font names. And I, as a Romanian, having letters like ăîâșțĂÎÂȘȚ in my native language, understand the use.

I guess you use multiple classes? I, for one, most certainly use them. Now, given the almost identical support between multiple classes and [attr] selector (IE6 :p), I see no reason why one shouldn’t use it.

And no, it’s NOT the CSS equivalent of slapping classes on everything in the markup, it’s the equivalent of not wasting CSS power just because of one PMF, STBG, IE6.

We had many times before the same argument :slight_smile: And I’ve said it before: I refuse to do my web dev stopping at what IE6 can do. Instead, I start with what modern UAs can do and then I gracefully degrade for granpa’ IE6 :wink:

True. Sad but true.

Exactly for perspective’ and progress’ sake I began using selectors existing in current VALID specs :slight_smile:

Looking at this another way: what type of regexp would we have today if the “philosophy of minimalism” regarding CSS selectors would apply the same way there? It’s pretty much the same thing. A regexp expression, much like a CSS selector, needs to be effective and efficient.

Finally, I don’t believe using selectors like > or + means more weight and clutter to my CSS. Per contra :slight_smile: