16 replies [Last post]
soundandgear
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2006-01-17
Posts: 9
Points: 0

Hi,

I'm trying to rebuild my site with css instead of tables but I'm having a few issues...

The original layout is here

The new page is here

Your see the main issue I have is with Firefox

The footer won't stay at the bottom but sits half way up the page

How can I fix this please?

gilmgallo
Offline
newbie
D.C.
Last seen: 16 years 2 weeks ago
D.C.
Joined: 2006-01-13
Posts: 7
Points: 0

well no pro

but the first thing the guys on here will tell you to do is clean all the errors on your pages including doctype: http://validator.w3.org/.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Tables to CSS Problems

In particular, <br clear="all"> should be <br style="clear:both;"> (with the style preferably moved to your stylesheet and the <br> given a class instead.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

soundandgear
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2006-01-17
Posts: 9
Points: 0

Tables to CSS Problems

thanks for the suggestions and I carried both these out. the validation certainly took awhile as I had 140 odd errrors to begin with, I now have only 1 & 1 warning but I can't seem to fix these.

Anyway changing the doc type made a difference.

Now I would appreciate some tips on how to get the layout looking better especially with the way the right nav area looks in Firefox.

soundandgear
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2006-01-17
Posts: 9
Points: 0

Center top Navagation Bar

hi, I have nearly rebuilt our website with css instead of tables but I have this new issue. How can I center the top navagation bar

If you can help it would be appreciated as I have tried everything without any luck

the web page is here

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Tables to CSS Problems

Instead of using floated divs, change your links to an unordered list and then do something like this:

#nav ul { list-style: none; text-align: center; }
#nav li { display: inline; }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

drhowarddrfine
Offline
Leader
Last seen: 12 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Tables to CSS Problems

Many of your problems are due to using the xml prologue. Only modern browsers understand this while IE goes into 'quirks' mode. You need to delete it. This is why IE displays differently than modern browsers like Firefox.

This is another reason why you should never design using IE. Unfortunately, fixing this may affect your IE layout but will make IE somewhat more standards compliant rather than acting like IE4.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

soundandgear
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2006-01-17
Posts: 9
Points: 0

Tables to CSS Problems

Tyssen wrote:
Instead of using floated divs, change your links to an unordered list and then do something like this:

#nav ul { list-style: none; text-align: center; }
#nav li { display: inline; }

aaah. that worked great thanks, took awhile but it's a lot better now.

I also put the border back in between the buttons but it becomes 2 px as they overlap, any idea how to show 1 px?

oh yeah, I couldn't work out how to get the width of the buttons to use a width in firefox like ie does which makes it look like the buttons wrap to the text length, any ideas on how to deal with this please?

soundandgear
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2006-01-17
Posts: 9
Points: 0

Tables to CSS Problems

drhowarddrfine wrote:
Many of your problems are due to using the xml prologue. Only modern browsers understand this while IE goes into 'quirks' mode. You need to delete it. This is why IE displays differently than modern browsers like Firefox.
...

The only one I found that would give me 100% height with full screen including header & footer at 100% was to use the following, what would you recomend I use?

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Tables to CSS Problems

Just use this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

soundandgear
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2006-01-17
Posts: 9
Points: 0

Tables to CSS Problems

I spent quite awhile using that before but the layout wouldn't come right. I might give it another go tommorow..

What issues and problems can happen with using my current Doctype ?

drhowarddrfine
Offline
Leader
Last seen: 12 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Tables to CSS Problems

To repeat:

Quote:
Many of your problems are due to using the xml prologue. Only modern browsers understand this while IE goes into 'quirks' mode. You need to delete it. This is why IE displays differently than modern browsers like Firefox.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Tables to CSS Problems

soundandgear wrote:
I spent quite awhile using that before but the layout wouldn't come right. I might give it another go tommorow..

What issues and problems can happen with using my current Doctype ?

Check out this page:

http://wiki.jalakai.co.uk/tester65b.htm

to see how an XML prolog affects IE. Trust me, it ain't pretty Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

soundandgear
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2006-01-17
Posts: 9
Points: 0

Tables to CSS Problems

drhowarddrfine wrote:
To repeat:
Quote:
Many of your problems are due to using the xml prologue. Only modern browsers understand this while IE goes into 'quirks' mode. You need to delete it. This is why IE displays differently than modern browsers like Firefox.

yes I already understood that before but what I mean is if its working now is there any reason to start over again? Will search engines etc not like it?

I just don't want to rebuild it as I just spent 3 hours before trying to do this and it was fine with firefox but IE didn't like it at all and everything ended up going crazy.

I spent last two days rebuilding the site and was hoping not have to do this unless it's very important. \:D/

soundandgear
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2006-01-17
Posts: 9
Points: 0

Tables to CSS Problems

thepineapplehead wrote:

Check out this page:

http://wiki.jalakai.co.uk/tester65b.htm

to see how an XML prolog affects IE. Trust me, it ain't pretty Laughing out loud

ok thanks everyone, i must sleep now and I will have another go with this as you say to do in the morning, i will check this link out now as well, cheers, ...

drhowarddrfine
Offline
Leader
Last seen: 12 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Tables to CSS Problems

Don't know how much you will have to rebuild. It may be minor corrections. But if you keep the prologue in, you will have constant problems trying to force code to work in IE, or you will get it working in IE but it won't work in anything else.

The only proper thing to do is remove the prologue and deal with it. Pay a little now or pay a lot more every time you edit the page.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

soundandgear
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2006-01-17
Posts: 9
Points: 0

Tables to CSS Problems

well I took the advice here and rebuilt the site again and I thought I had it right until I followed a link to the home page. What happens is if you land on the home page from a link then the left & right menus fall below the content. If you refresh the page it comes right. I don't think this happens all the time, maybe it depends on what content is shown since it is running on a random script I built?

I would appreciate it if some members could confirm this happens to them and if they know how I could fix it?

http://www.soundandgear.com/

another issue but less important for now: Does anyone know how I can get the footer to always be at 100% height? At the moment it looks that way but if there is only a little content on a page or a user has a large res monitor setting then it will cut off at bottom of content?

thanks in advance