11 replies [Last post]
RyanK
Offline
Regular
Last seen: 13 years 43 weeks ago
Timezone: GMT-5
Joined: 2006-06-15
Posts: 17
Points: 0

URL: http://www.kaginweb.com/fds/

I have tried to figure out what is going wrong with the site, but am unable to figure it out. I wasn't sure where to start asking questions, nor was I sure what exactly to ask. I'm running into a lot of quirky errors. I use IE6 (I believe). The error I am getting is that in my menu bar, the last few characters of the menu is being duplicated on the next line.

I have noticed that there are additional errors on browsers like Mozilla and Opera, namely that the dividing image between my drop down menus is creating unnecessary space, that the menu bar is overlapping with the content area, and that there is space between the top image and the menu bar.

None of the links have been activated yet, as the site is still being developed. I'm just curious as to what is going wrong, and where I can fix/learn from it.

I apologize for the length.

-- Ryan

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

CSS Confusion

I'd start again but begin by reading a couple of tutorials:

Listamatic - for how to make horizontal menus with lists (check out the 'Horizontal Lists' links)

Sons of Suckerfish Dropdowns - for dropdown menus. There are also some dropdown examples on the Listamatic page.

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

RyanK
Offline
Regular
Last seen: 13 years 43 weeks ago
Timezone: GMT-5
Joined: 2006-06-15
Posts: 17
Points: 0

CSS Confusion

Reading through the other posts afterwards dealing with drop down menus, I figured that would be the best. Is it easiest to do drop down menus with lists or with divs (i.e. the way I did it)?

But in terms of the IE error I got, is there any way to explain it?

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

CSS Confusion

RyanK wrote:
But in terms of the IE error I got, is there any way to explain it?

It shouldn't be a question of what's easiest, but rather what is the best and most correct. Using a list is the correct semantic choice.

RyanK wrote:
But in terms of the IE error I got, is there any way to explain it?

Sounds like the duplicate character bug.

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

RyanK
Offline
Regular
Last seen: 13 years 43 weeks ago
Timezone: GMT-5
Joined: 2006-06-15
Posts: 17
Points: 0

CSS Confusion

Thank you for the duplicate error thing. That was quite interesting, as I had never heard of that. I knew from the experience of playing with it that it needed a width of 803 instead of 800 - strange how that works!

I have now updated it to be the list format to be in the current location as the old one (moving the old source to /fds/old). My question is, since I don't have the other browsers, is there a fast way to ensure that it works on the other browsers without downloading them all (Opera, Mozilla, etc.)?

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

CSS Confusion

There's no substitute for testing in a real browser. Downloading and installing Firefox & Opera won't take too long or take up too much space and you may just find browsing becomes a whole lot easier too. Wink Getting your site right in Firefox, Opera and IE will account for more than 90% of all visitors to your site.

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

RyanK
Offline
Regular
Last seen: 13 years 43 weeks ago
Timezone: GMT-5
Joined: 2006-06-15
Posts: 17
Points: 0

CSS Confusion

Alright, thanks for the advice. I was just wondering if verifying it in the HTML and CSS verifiers provided elsewhere on this site would account for it rendering properly on other browsers. I will download the other browsers shortly and figure out how they render sites.

Thanks for the help!

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 4 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

CSS Confusion

RyanK wrote:
Alright, thanks for the advice. I was just wondering if verifying it in the HTML and CSS verifiers provided elsewhere on this site would account for it rendering properly on other browsers.

Afraid not. The validator simply checks the code is valid. Now, browsers that DO support the standards (Firefox, Opera, Safari, etc) should all display the same if the code validates.

IE on the other hand renders things normally completely different, so it's always worth checking.

Verschwindende wrote:
  • CSS doesn't make pies

RyanK
Offline
Regular
Last seen: 13 years 43 weeks ago
Timezone: GMT-5
Joined: 2006-06-15
Posts: 17
Points: 0

CSS Confusion

As mentioned before, I fixed up the menu to be in list format with CSS alterations. However, I still can't seem to find out one "error" (difference) that I keep getting.

When rendered in Mozilla, there is a gap between the top image and the menu bar. In IE, this is not the case (at least in my version). What is causing this space, and how can one eliminate it?

Sorry for being so elementary - I'm trying to teach myself CSS while doing more advanced things.

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

CSS Confusion

RyanK wrote:
When rendered in Mozilla, there is a gap between the top image and the menu bar.

.top img { display: block; }

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

RyanK
Offline
Regular
Last seen: 13 years 43 weeks ago
Timezone: GMT-5
Joined: 2006-06-15
Posts: 17
Points: 0

CSS Confusion

No real purpose to this post other than thanks for the help! Does mozilla think that when the display property is not declared, it automatically puts a paragraph break instead of a line break (<p> instead of <br>)? Or if I'm misunderstanding, then out of curiousity, why does Mozilla do what it did while IE did something else?

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

CSS Confusion

Well actually it's s'posed to be IE that reserves space below images. Images are inline elements and IE leaves space below them for the descenders of text (ie on letters p, j, q etc.) The fix for this in IE is either display: block or vertical-align: bottom on the image. Not sure why it solved the issue for Firefox in this case, but display: block is always the first thing I try when there's an image/space issue.

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