17 replies [Last post]
cwemely
Offline
Regular
Maryland
Last seen: 14 years 10 weeks ago
Maryland
Timezone: GMT-5
Joined: 2007-01-28
Posts: 12
Points: 0

Hi All,

I am so new to CSS that I don't even know what to search for, so I apologize for getting right to asking for help.

I started reading about CSS on Wednesday and I have started to develop a complete site for a client. I come from the old "Table School" and decided to leave that world behind. I love CSS and have everything working in FF 2.x and IE 7. My problem, as I have discoverd with many, is IE6. The nice drop-out menu I created just goes away entirely in IE6 or if I can massage it to appear it appears way down low.

The page is here: http://www.emelygroup.com/hecc/index.html.

I have used two separate style sheets. One for each for global and sidebar. Therefore, the code may be too long to paste here. If there is another way for the code to be viewed, please advise.

My deadline is fast approaching and it never occurred to me that the most popular browser would have so many challenges. I thought it would be the other way around. Smile

Please help!

Thank you!

Chip

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

You're using an IE

You're using an IE conditional comment in the head of your page, so you don't need to do this kinda stuff:

#wrapper { width: 800px; margin-right: auto; margin-left: auto; padding: 0; text-align: left; background-color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size :medium; line-height: normal; }

* html #wrapper {
width: auto;
min-width: 800px;
max-width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
background-color: #cccccc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size :medium;
line-height: normal;
}

/******** Basic ********/

body {
margin: 0;
background-color: #BCCBAC;
text-align: center;
}

* html body {
background-color: #BCCBAC;
text-align: center;
}

Even if you weren't using conditional comments, you wouldn't do that cos the rules you're feeding to IE6 with the * html are nearly identical to the main rules. You only need to specify the bits that are different.

IE<=6 also doesn't understand min- or max- values, so there's no point specifying them for IE either.

But the bit that really needs looking at is this:

#sidebar { position: absolute; top: 0; left: 0; width: 256px; }

* html #sidebar { /* IE6 fix */
position: relative;
top: -590px;
left: 0;
padding-top: 5px;
width: 256px;
clear: both;
}

Positioning the sidebar absolutely obviously works OK in FF and IE7 so there doesn't seem much point trying to do something different with it in IE6?

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

This is not helpful I

This is not helpful I realise but it ought to be mentioned that it is probably mild folly to believe that one can change overnight from old school table web layouts to CSS-P and take on a client project with a short deadline.

You have not yet encountered half the problems and complexity that using CSS to it's full extent can and will bring, it is a subject that requires a fair bit of study and experience gained over time to be able to use effectively.

Far better to spend a little time getting familier with it and all it's properties and quirks cross browser before plunging into real world usage.

P.S SGML comments are written as:

rather than:

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cwemely
Offline
Regular
Maryland
Last seen: 14 years 10 weeks ago
Maryland
Timezone: GMT-5
Joined: 2007-01-28
Posts: 12
Points: 0

Tyssen, OK...That makes

Tyssen,

OK...That makes sense. The reason for the change from absolute to relative in the IE specific code is that if I make it absolute the sidebar dissapears altogether. The only way I cculd even see it was to make it relative.

I used an extreme negative margin like this:
* html #sidebar { /* IE6 fix */
position: relative;
top: -590px;
left: 0;
padding-top: 5px;
width: 256px;
clear: both;
}

Now, the problem I have is with the subwrapper. I noticed that it is leaking into the right side and the main wrapper margings : auto; is not working. This may be part of the original problem

Any more help is GREATLY appreaciated. This is a lot more stressful than I had thought it would be. Although I am sure it has been said 1000 times before, I am definately not an IE fan right now. Wink

cwemely
Offline
Regular
Maryland
Last seen: 14 years 10 weeks ago
Maryland
Timezone: GMT-5
Joined: 2007-01-28
Posts: 12
Points: 0

Hugo, I know. I was up for

Hugo,

I know. I was up for a challenge! Smile I just didn't realize the IE issues that existed, much less how prevelant they were.

I feel that I am almost there with this project. Once I sort these positioning problems out with IE 6, I think I am in the clear.

The question is now what do I do. I either work with a hybrid of CSS and tables, which I would think would take me almost as much time as psyching out this remaining issue. Or, I plunge ahead.

As for the comments...Sorry, it is a habit from Cold Fusion where the comment tags are indeed .

Thank you,

Chip

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Probably wise to go with the

Probably wise to go with the flow now you've begun , I don't think I or anyone else would advocate a mix of table and css layout.

First though you need to address the issues raised by Tyssen earlier as the layout doesn't hold together at all in IE6, that is of course if you have not already done so(judge on your original site link)

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cwemely
Offline
Regular
Maryland
Last seen: 14 years 10 weeks ago
Maryland
Timezone: GMT-5
Joined: 2007-01-28
Posts: 12
Points: 0

I have made the mods

I have made the mods indicated in my response to Tyssen, but other than that I feel like I am chasing my tail between position, margins and padding. Smile

If you view the link now you will see a different picture.

I made the subwrapper grey on purpose to troubleshoot which element was giving me grief. So I narrowed it down, but I can't figure out how to put it back where it belongs.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Sorry I still see the

Sorry I still see the problem rulesets and I did a forced refresh.

* html #wrapper needs to vanish altogether.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cwemely
Offline
Regular
Maryland
Last seen: 14 years 10 weeks ago
Maryland
Timezone: GMT-5
Joined: 2007-01-28
Posts: 12
Points: 0

OK. I deleted the *html

OK. I deleted the *html #wrapper code. Now how can I fix the placement?

Thank you.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

As Tyssen mentioned earlier

As Tyssen mentioned earlier you will also need to kill the star selector rules for sidebar.

Try removing the #main width and float and just giving it a margin left to clear the left sidebar let IE see the absolute positioning, it would be better if it were floated but I assume you have the sidebar flowed after the #main element which means trickery to get it up alongside but can be done with an extra wrapper or other techniques.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cwemely
Offline
Regular
Maryland
Last seen: 14 years 10 weeks ago
Maryland
Timezone: GMT-5
Joined: 2007-01-28
Posts: 12
Points: 0

Good Call on the #main width

Good Call on the #main width removal!

OK. The page is now WAY better in IE6 and is not messed up in FF or IE7!

Two small issues. 1) The first fly-out menu freaks out a little, but the others don't. 2) The home page looks good, but there is a small white space under the banner and to the right. Is this a wierd pixel adjustment thing?

Thank you. This has been VERY helpful. I am almost there! Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Didn't notice either of the

Didn't notice either of the two problems mentioned but may have not be looking carefully enough.

You do have whitespace under your footer in IE6 which may just be a collapsing margin so check that you have control of your margins on elements within the footer (try setting the bottom margin to 0?)

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cwemely
Offline
Regular
Maryland
Last seen: 14 years 10 weeks ago
Maryland
Timezone: GMT-5
Joined: 2007-01-28
Posts: 12
Points: 0

The white space is on a sub

The white space is on a sub page. Oops...Sorry. I meant to mention that in my last post. If you click on the seond menu down (HECC Education Partners) and then Overview you can see what I mean.

I also still have the first sub-menu under Degrees & Certificates acting funny.

Thank you.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The image problem might be

The image problem might be solved if you set it to display:block.

The menu problem I still don't, see you will have to be technically more exact than 'acting funny' Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cwemely
Offline
Regular
Maryland
Last seen: 14 years 10 weeks ago
Maryland
Timezone: GMT-5
Joined: 2007-01-28
Posts: 12
Points: 0

No joy with the display:

No joy with the display: block setting. It looks like the header, and navbar separate and there is also extra white space to the right.

I was able to fix the menu issue with a width adjustment.

Only the above problem left! Smile

Thank you.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Actually display:block does

Actually display:block does fix the bottom line as would vertical-align:bottom as long your applying it to the img, it's a reserved space for letter decenders (baseline) it allows for text to be arranged on a straight baseline with the decenders such a 'g' hanging below instead of pushing up the letter.

As for the rest of the problem you need to look carefully between the two pages as you have one that works and one that doesn't therefore in the code somewhere there will be a difference, your header area should be exactly the same from page to page , look for the anomily in the coding.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cwemely
Offline
Regular
Maryland
Last seen: 14 years 10 weeks ago
Maryland
Timezone: GMT-5
Joined: 2007-01-28
Posts: 12
Points: 0

Awesome! It worked. I had

Awesome! It worked. I had applied the display: block to the #header and tht didn't work. I applied it to #header img and it worked!

I also fixed the ther white space in the overview page. I can't believe it was something as dumb as the italic style I inserted for a particular text section on that page. I even tried an em tag with no luck. Oh well...Small price to pay.

Thank you for your help! It works great now!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Thought you may have applied

Thought you may have applied it to the header Smile

The italic problem sounds as though you may have run foul of the 'IE Italic bug', if you google on that you will find explanations of that problem.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me