Please help!!! - site not working in firefox

**robertsaunders** · 12-08-2006, 07:40 PM

I am having a nightmare. I've just re-written most of the site I'm working on, using css to replace some of the tables. All seemed to be working fine with IE, but then I tried it in Firefox and it is a total and utter disaster!

I've uploaded the site to http://www.vweekender.co.uk/test.

Since posting this thread the first time, I have managed to work through some of the problems (probably with bad solutions but they seem to work). In order to keep the thread fully meaningful I am uploading the corrections to the main site (http://www.vweekender.co.uk) and will keep the /test page as it is. If my work-rounds are not ideal, please advise.

The biggest problem that remains is with the left hand menu. The easy work-round would be to go back to putting it in a table, but really I would like a nice neat css solution. If anyone can advise I would be MOST grateful.

I am now starting to wonder whether I was sensible to start abandining my liberal use of tables. They may be a bit ugly, but they seem to be a lot more reliable for cross-browser consistency, and I really could have done without this headache today!

Looking forward to hearing your thoughts (please),

Rob

**robertsaunders** · 12-09-2006, 03:36 PM

OK, now I've made a discovery. I used http://validator.w3.org/ and discovered that I was missing a DTD.

Now I find that when I add:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

the left hand menu is messed up in IE exactly the same a in FF.

I really don't want to have to fall back on my tables. If anyone can help me sort of the left hand menu using css I really would be most grateful.

Here is the code:

Code:

<div class="menuleft">
<a class="menul" href="index.htm">HOME</a>
</div>
<div class="menuleft">
<a class="menul" href="prices.htm">PRICES</a>
</div>
<div class="menuleft">
<a class="menul" href="contact.htm">CONTACT</a>
</div>
<div class="menuleft">
<a class="menul" href="faq.htm">FAQ</a>
</div>

CSS:

Code:

.menuleft {margin-bottom: 0px;
margin-top:20px;}


A.menul:link {text-decoration:none; padding:15px 0px; margin:0; height:51px; width:100px; 
 	background-image: url("button100.gif");
	background-color: transparent;
	background-repeat: no-repeat; 
	font-weight: normal;  
	letter-spacing: 2px; font-size:10pt;  font-family: verdana, arial; color:#404040}
A.menul:visited {text-decoration:none; padding:15px 0px; margin:0; height:51px; width:100px; 
 	background-image: url("button100.gif");
	background-color: transparent;
	background-repeat: no-repeat; 
 	font-weight: normal;  
	letter-spacing: 2px; font-size:10pt;  font-family: verdana, arial; color:#404040}
A.menul:hover {text-decoration:none; padding:15px 0px; margin:0; height:51px; width:100px; background-image: url('button100.gif'); font-weight: normal; letter-spacing: 2px; font-size:10pt;  font-family: verdana, arial; color:#404040}

Thanks,

Rob

**mwinter** · 12-10-2006, 12:20 AM

Originally Posted by robertsaunders

I am having a nightmare. I've just re-written most of the site I'm working on, using css to replace some of the tables. All seemed to be working fine with IE, but then I tried it in Firefox and it is a total and utter disaster!

Which tends to imply that you've invoked rendering errors in MSIE. Your style sheet is tailored towards bugs, rather than the CSS specification.

I've uploaded the site to http://www.vweekender.co.uk/test.

One immediate observation is that you have a width declaration to be applied to anchors, however the width property cannot apply to in-line elements.

The biggest problem that remains is with the left hand menu. The easy work-round would be to go back to putting it in a table, but really I would like a nice neat css solution. If anyone can advise I would be MOST grateful.

I'll have a crack at rewriting it tomorrow.

I am now starting to wonder whether I was sensible to start abandining my liberal use of tables. They may be a bit ugly, but they seem to be a lot more reliable for cross-browser consistency, and I really could have done without this headache today!

The problem isn't with compatibility. You can't expect something to render correctly when it's broken.

Mike

**robertsaunders** · 12-10-2006, 10:43 PM

Originally Posted by mwinter

I'll have a crack at rewriting it tomorrow.

If you could, that would be most helpful Mike. I had another go at it today and came up with the following which seems to work but doesn't look very elegant, and has the disadvantage that the background images is not active as part of the link. If you could suggest a more elegant solution I would appreciate it.

Code:

<div class="menuleft">
<div class="menul2">
<a class="menul" href="index.htm">HOME</a>
</div>
</div>
<div class="menuleft">
<div class="menul2">
<a class="menul" href="prices.htm">PRICES</a>
</div>
</div>
<div class="menuleft">
<div class="menul2">
</div>
<a class="menul" href="contact.htm">CONTACT</a>
</div>
<div class="menuleft">
<div class="menul2">
<a class="menul" href="faq.htm">FAQ</a>
</div>
</div>

Code:

.menul2 {
	padding: 15px 0 0 0;
	}


A.menul:link {text-decoration:none; 

	background-color: transparent;
	font-weight: normal;  
	letter-spacing: 2px; 
	font-size:10pt;  
	font-family: verdana, arial; 
	color:#404040}

A.menul:visited {text-decoration:none; 
	background-color: transparent;
	font-weight: normal;  
	letter-spacing: 2px; 
	font-size:10pt;  
	font-family: verdana, arial; 
	color:#404040}



A.menul:hover {text-decoration:none; 
	background-color: transparent;
	font-weight: normal;  
	letter-spacing: 2px; 
	font-size:10pt;  
	font-family: verdana, arial; 
	color:#404040}

.menuleft {margin-bottom: 0px;
	height:51px; 
	width:100px; 
 	background-image: url("button100.gif");
	padding: 0px 0px 0px 0px;
 	margin-top:20px;}

**mwinter** · 12-12-2006, 01:31 AM

Originally Posted by robertsaunders

If you could, that would be most helpful Mike.

Sorry, I haven't had the time. I haven't forgotten, though.

I had another go at it today and came up with the following which seems to work but doesn't look very elegant, and has the disadvantage that the background images is not active as part of the link.

Whilst I'm here, could you explain the background image issue in a bit more detail? What exactly would you like to have happen?

Mike

**robertsaunders** · 12-12-2006, 04:44 PM

Originally Posted by mwinter

Whilst I'm here, could you explain the background image issue in a bit more detail? What exactly would you like to have happen?

I think what I have now is probably OK Mike. The only problem is that the backround image (the white box) is not active as part of the link (as it is when viewed through IE at http://www.vweekender.co.uk/test) Obviuosly, I could get round this by making the text part of the image, but I don't want to do that. Is there a way that i can keep the text editable but make the whole of the white box clickable as part of the same link as the text?

I hope that makes sense. Don't waste too much time on it - at least I've managed to get it working in FF and IE now. And it's passed the http://validator.w3.org/ test.

There is one other issue you might be able to help me with too: you will see that for the prices and other text pages I have introduced <p class="top"> and <p class="bottom"> with zero margins top and bottom respectively, in order to prevent a spaces appearing in the backround image in FF (see http://www.vweekender.co.uk/test/prices.htm through FF and correction at http://vweeekender.co.uk/prices.htm). Is this a valid solution - or is it a bodge?

Rob

**mwinter** · 12-16-2006, 03:38 AM

Finally got around to finishing the index, though I realise that it's just for comparison, now. The prices page wouldn't take much effort as there are only a few changes from the index.

There is one other issue you might be able to help me with too: you will see that for the prices and other text pages I have introduced <p class="top"> and <p class="bottom"> with zero margins top and bottom respectively, in order to prevent a spaces appearing in the backround image in FF (see http://www.vweekender.co.uk/test/prices.htm through FF and correction at http://www.vweekender.co.uk/prices.htm). Is this a valid solution - or is it a bodge?

Not as such, though you could apply only a top margin, adding a class attribute to only the first paragraph element. Given proper support, you wouldn't even need to do that: either remove the margin with help from the :first-child pseudo-class, or, if that's not appropriate, apply the margin using the adjacent sibling selector (p + p).

Perhaps a better alternative is to apply the background to a containing element. The transparent area introduced by the margins would then show the white, not the pink.

Mike

**mwinter** · 12-16-2006, 03:40 PM

The prices page. Only a few tweaks and a new header image was necessary. I could have created new corner images, but that would have been more trouble that it was worth.

The areas left and right of the link text on the left-hand side are part of the link itself. The areas above and below are not because they aren't the same element.

Mike

**robertsaunders** · 12-16-2006, 04:47 PM

Thanks Mike.

I see that you have used the list element for the menus, which seems to be a popular way to do it. Is there any advantage to using lists for menus? (It seems to me a shame that background images and width and height are not permitted for link elements as this would make life a lot easier. )

Also, I wasn't familiar with some of the code you used in the head.
Should I use charset=utf-8" ?

And what is this:

Code:

<!--[if lte IE 7]>
        <link rel="stylesheet" type="text/css" href="ie7-fix.css">
        <script type="text/javascript" src="ie7-fix.js"></script>
        <![endif]-->

?

Thanks again,

Rob

**mwinter** · 12-16-2006, 05:26 PM

Originally Posted by robertsaunders

I see that you have used the list element for the menus, which seems to be a popular way to do it. Is there any advantage to using lists for menus?

They're better semantically. They also prevent problems in less flexible browsers or where CSS is disabled: rather than a run of link text, each link is separated from its neighbours. To take an obvious (though not necessarily relevant) example, this would be important for Braille readers and aural browsers where visual separation makes no difference to the user. Even when such considerations aren't deemed important, it takes no more effort to do it - at least when it becomes second nature.

(It seems to me a shame that background images and width and height are not permitted for link elements as this would make life a lot easier. )

One can style the anchor to be rendered in a block-level formatting context using the display property:

Code:

a:link {
    display: block;
    width: 5em;
}

The anchor is still an in-line element as far as HTML is concerned, so its content model remains the same. However, it would now render as a block-level element.

Also, I wasn't familiar with some of the code you used in the head.
Should I use charset=utf-8" ?

You don't have to, but I tend to use Unicode characters like em dashes (—) and left- and right-quotation marks (“ ”, ‘ ’). I dislike entering these as entity references and they aren't in the repertoire of other encoding schemes like ISO-8859-1 (Latin-1) so there's not much choice. There are a few literal non-breaking spaces knocking around, too. They're in the last list to keep the text of each item together.

I would like to point out that I've only used a meta element because I cannot alter the Content-Type header on my ISP's Web server. I do things properly on my test server.

And what is this:

Code:

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-fix.css">
<script type="text/javascript" src="ie7-fix.js"></script>
<![endif]-->

?

I use generated content to create the rounded corners as it avoids dumping extra elements into the markup. Even IE 7 doesn't support this so the necessary elements to create the same effect are added via a script. There are also a few IE-specific fixes for the style sheet. To save other browsers the bother of downloading these files, they're included in conditional comments, a format processed by only IE[1].

Mike

[1] And so long as people don't misuse conditional comments to bias sites against other browsers, Microsoft-only is how it should remain.

Thread: Please help!!! - site not working in firefox

Thread Tools

Search Thread

Please help!!! - site not working in firefox

Bookmarks

Bookmarks

Posting Permissions