HTML and CSS Help

minger · August 27 '07, 02:29 PM (#1)

Hi guys, this is not my first CSS problem that I've posted on here, and the first problem was solved beautifully, so hopefully we can fix this one as well.

I have started redoing a site that was originally done with tables and frontpage includes, and put it into full CSS with php server-side includes. I was testing on Firefox while I was designing, and everything was working great. I decided to switch over to view the page in IE and OMG!!!...it's pretty messed up. Again, it looks fine in Firefox, but here are the links.

You can view the page at:
http://www.eng.utoledo.edu/mime/new_css/index.php
and the stylesheet at:
http://www.eng.utoledo.edu/mime/new_...stylesheet.css

I'm not sure if the problems are with the includes, or if my CSS is just really that bad, but everything is WAY out of line in IE, opacities and hover classes aren't working. So...I'm not sure if perhaps the included pages can't "see" the stylesheet or what, but basically I am lost and way over my head I think.

Thanks a lot for the help, I really appreciate it

minger · August 27 '07, 02:58 PM (#2)

OK, so the alignment problem is with my border. I have a main centering container with a 660px width. That same container has a 1px solid border. The sum of the widths of the main nav bar are also 660px. If I take off the border for the main container, the elements show up in line correctly. So, why is IE I guess drawing the border inside of the element rather than outside of it?

edit: Just for clarification, if I set the width of the main container to 662px, it displays fine, but in Firefox, the right nav is now offset a little to the right from the top (since it is floated to the right).

imagn · August 28 '07, 01:46 PM (#3)

You are missing the doc type declaration so IE is having to guess. Replace your "<html>" tag with the following:

<!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" xml:lang="en" lang="en">

**Shadowfiend** · August 28 '07, 06:54 PM (#4)

It's worse than IE guessing, IE goes into quirks mode, which is the mode where anything goes. Very very bad place to be.

frozen interact · August 31 '07, 08:23 AM (#5)

First thing you want to do if you've the stylesheet working in one browser is stick conditional comments in.
This should make it easier to fix in the other browsers while not messing up the working version e.g:

<link rel="stylesheet" type="text/css" href="/css/stylesheet.css" />



Also validate that page:
http://validator.w3.org/check?uri=ht...Inline&group=0

Its got lots of errors in it at the moment. If you validate it you will probably find you resolve a lot of you problems.
Once its valid if you are still having trouble then let me know.

Chris.

**mlseim** · August 31 '07, 08:48 AM (#6)

Use no hacks, use only 1 stylesheet ...

Design for FF and then adjust for IE.
You can do it all without conditionals and no hacks.

To Chris ...

Imagine having 4 different style sheets and deciding to
make a small layout change in the future. Oh my, that's
going to take you 2 more days to figure out how to make
that change on all 4 style sheets. It would be very frustrating.

frozen interact · August 31 '07, 09:05 AM (#7)

Actually its very straight forward and a lot easier if you start from the beginning.

You NEVER need to make changes to all 4 stylesheets. In fact in practice 99% of the time you use the main stylesheet.

I just develop the site in firefox using one stylesheet then once I'm near the end if there are any tweaks needs in IE6 I add the empty IE6 stylesheet and override any styles or add any new elements if necessary.
Often I'll not need to have a file for IE7 but IE6 and IE5.5 sometimes have one or two classes in.

I think it's cleaner than using * html and things like that in the same stylesheet file.

Works a treat!

**Shadowfiend** · August 31 '07, 09:40 AM (#8)

As mlseim said (you seem to have misread slightly), you very rarely need hacks *or* extra stylesheets. So far, I've only ever needed extra stylesheets once, and it was for an insanely complicated styling that I was doing (styling an entire JS toolkit to look a certain way -- basically like restyling a desktop application). 99.99% of the things I used the alternate stylesheet for there aren't a problem in regular pages.

frozen interact · August 31 '07, 09:50 AM (#9)

Hi,
Well I think if you read the posts it was ME that said you rarely need conditional statements. In fact I said 99% of the time too so it looks you are agreeing with me?

He said you NEVER need conditional statements or hacks.
Conditional statements are definitely a good way of understanding cross-browser CSS for people that are new to CSS and it will probably help him work things out without getting a headache.
Looking back at my post I think that probably the focus should have been the valid XHTML though.
He'll probably find things look a lot nicer after he's validated everthing.
Chris.

**mlseim** · August 31 '07, 11:46 AM (#10)

I guess that I've never used a conditional statement.
So, that's where I was coming from.

We're all saying the same thing about valid XHTML.

There are times when a layout design is so insane that it becomes
necessary for the web developer to simply tell the web designer that
it needs to be done a different way. Site layout is not even close to
being as important as the content of the website.

I wouldn't even waste my time with a complicated layout if it provides
no advantages to the display and organization of content.

When you think about it, even Google and Amazon are still using <tables> ...
They have the right idea about the importance of content over design.

Someone who is starting out on a blank slate with CSS, as Chris mentions,
should indeed go for valid XHTML and should not use any conditionals or
hacks, as they really aren't needed ... I guess that's my point in all of this.

Minger is actually off on the wrong foot from the "get-go". He/She is
using graphic images for the text buttons (that alone is a problem).
The struggle with just the layout of navigation is going to really give him/her
a lot of frustration ... and they haven't even started with the content.

It's a prime example of the point I'm making about design over content.

But now I think I'm straying from the main topic of this thread, but it's
interesting to see other people's opinions.

minger · September 4 '07, 12:40 PM (#11)

So....has anyone looked at my code to find out what I'm doing wrong?

**mlseim** · September 4 '07, 03:24 PM (#12)

It actually looks better with IE than FF ...
So I'm confused about the first post (IE vs FF).

In any event, you have a nice design, but there are too
many things wrong. Mainly, all of your navigation (link text)
should be text, not images. This might limit the font choices
you have (or wish to have), but that's the way it should be.

That means that the top navigation image should be one whole
image as a background, not broken-up into separate images.

Same thing for the vertical right-side navigation.
Those should be background images with text on top.
The text should not be part of the image.

With all that ... it sort of makes it necessary to start all over.
So I (only speaking for myself) cannot provide a good example
of what you need to do in order to fix this.

But, now is the time to fix it ... doing so now, will save you a lot of
frustration in the end.

I wish I had a better answer for you, but I cannot make it work the
way it is now, and even if I could, once you start adding other pages,
it's going to be a nightmare to control the layout.

All I can say is, start over with just the graphics and a blank page.
You can use CSS to position the text links over the upper navigation image,
and use CSS to display the right-hand vertical menu using a graphic image as
the background and actual text as the link.

Never combine the text with the graphic images.

... and FYI ...

You'll discover that if you use text for the links (instead of combined text/image),
you will be able to control those links on other pages ... example, text link color,
and changing what the text says.

minger · September 4 '07, 03:58 PM (#13)

Right you are, I was just kind of updating the site. It was made like that, and honestly didn't want to hassle with making changes such as removing the all-pix links.

After I added the doctype, it reversed the firefox vs IE. I must have forgotten to edit a post. Also, at this point, it's all for my own personal learning. I have just found out that the "guys up stairs" are sending down a new template that will be globally over all departments.

I would still like to know what I'm doing wrong though. I mean, design standards aside, why aren't my elements showing up as they should?

HTML and CSS Help

CSS + IE + php includes maybe = woes!!