I am creating a new site using the 'Musical' layout in Webstyle 4. The site looks fine in IE but is a bit hit and miss in Firefox....anyone got any ideas
http://www.dudleyfestival.co.uk/
Printable View
I am creating a new site using the 'Musical' layout in Webstyle 4. The site looks fine in IE but is a bit hit and miss in Firefox....anyone got any ideas
http://www.dudleyfestival.co.uk/
Your website is displaying in "quirks" mode. This is due to an invalid Doctype statement. Try replacing your current doctype statement with the following:
:)Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
And by the way - Welcome to the forums.
Thanks for the reply. I tried that but it just caused the same effect on IE as it did on Firefox! A
Any other ideas?
Make sure that you add that doctype otherwise all other corrections will be for naught. Quirks mode will show your page in an unexpected manner.
Here is what I see so far. Your right holderdiv box is actually 554px in Firefox instead of the 520px you hoped for. This causes that box to move down below the left holderdiv2. IE looked OK because it doesn't calculate the CSS box size correctly so it looked OK even though it really isn't.
I saw a statement you added in the html which I believe is causing the problem. It is:
With that width of 534px you defined plus the two 10px paddings gives the 554px. Try reducing that width to get the right hand column to move up next too the left hand column. Just to be safe, try setting the width to 518px to allow for any borders. Also, try removing the style statement all together. I'm really not sure that it is needed.Code:<!--the holder div contains all right-hand column content. The style #holderdiv defines the width of the right- hand column to be 500 pixels, to alter the width edit this style. class="right" floats the column to the right of the page-->
<!--start of right column content. class="right" floats the column to the right of the page-->
<div class="right" id="holderdiv" style="width: 534px; height: 396px">
Try that for now and see what happens. Happy coding. :)
Thanks for that but it still didnt work. I assume the suggestions you made were meant to actioned within the code lines you mentioned on your reply. I changed the width and removed the style statement on the site but no joy. Any other ideas?
Mike
I would suggest reading the following link on doctypes:
http://www.communitymx.com/content/a....cfm?cid=85FEE
I would then suggest getting a good book on CSS and HTML.
The two fixes I suggested will get your page on a start to correct rendering. They will not however correct the other coding issues. These will have to be addressed once these two changes are made. :)