6 replies [Last post]
seanoneil72
seanoneil72's picture
Offline
Regular
Last seen: 13 years 17 weeks ago
Timezone: GMT-8
Joined: 2008-01-23
Posts: 42
Points: 0

I am getting a better grasp of how things work with CSS and Dreamweaver... or so I thought Smile

I am having an issue of compatibility between my code and IE6. What is causing the problem is where I have nested two rectangular divs inside another larger rectangular div, and for some reason the two inner divs always merge back-to-back in the center of the screen when using IE6.

I test it in Firefox and it works as it should, there is a space between the two inner divs and the text in each div floats over the appropriate area of the background image.

I'm not sure why IE6 doesn't react the same way Firefox does, but I have tried everything I can think of tonight to make it display properly in IE, with no luck.

Can anyone point me in the right direction?

Untitled Document

Revolutionary Live Chat Interface
Make sure every visitor to your site is greeted just like they had walked into your store
Superior Data Tracking Tools
Gather all of the data you need to satisfy your customer's preferences
Turn Web Persuader on or off and interact with customers according to your schedule
Use Web Persuader in conjunction with a live response center for 24 hour customer support

Website content copyright 2008, Web Optimizer INC.

Site by PSO

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 37 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

This is a common problem in

This is a common problem in IE 6, and to a lesser extent, IE 7.

In order to deal with this, I generally make conditional styles for each browser. I've never done it with embedded style sheets, but it should work - however, I recommend you get away from embedded styles and go with external ones.

Anyway, if you want to do it with embedded, follow this method:

This will allow Firefox to interpret the CSS it reads ( what you already have ). If you create different styles in the IE 6 block for a certain div that isn't displaying properly in 6, IE 6 will interpret that style, rather than the ones Firefox reads.

Example:

Firefox will render as usual, but IE 6 will make the list items display as a block, breaking them onto their own lines. IE 6 will still use margin-right: 25px; and margin-left: 25px; though.

So, don't worry - it's not your code, it's just outdated browsers. That said, IE 6 is still a consideration since ~35% of the market uses it.

Also, some additional conditions are below.

( Applies to 6 )
( Applies to 7 )
( Applies less than and including 7 )
( Applies greater than and including 3 )
( Applies greater than 3 )
( Applies to less than 7 )
( Applies to all of IE )

There are a few others that allow you to pick and choose ( I think they're done with +'s ) but I never need them.

Be wary of the order of your comments, though, sometimes a conditional style sheet will not interpret correctly in the designated browser because of the order ( when using multiple comments ).

Also, you can use these comments for JavaScript.

maryjane9110024
maryjane9110024's picture
Offline
Regular
Phoenix, AZ
Last seen: 13 years 11 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2007-12-27
Posts: 35
Points: 0

Could you show how to do

Could you show how to do this with an EXTERNAL style sheet please?

Thanks

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 37 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Sure. It can be done with

Sure. It can be done with style tags and the @import rule, or the link tag.

@import url('URL HERE');
Embedded also can go here

JavaScript:

maryjane9110024
maryjane9110024's picture
Offline
Regular
Phoenix, AZ
Last seen: 13 years 11 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2007-12-27
Posts: 35
Points: 0

Um ... that didn't work.

Um ... that didn't work.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 37 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Start a new thread with the

Start a new thread with the problem so we don't clutter this one.

seanoneil72
seanoneil72's picture
Offline
Regular
Last seen: 13 years 17 weeks ago
Timezone: GMT-8
Joined: 2008-01-23
Posts: 42
Points: 0

Aequitas, thank you so much

Aequitas, thank you so much for your help!

Ultimately, I decided to try another approach. For some reason I thought it would lend itself to having less issues between browsers, I may or may not have been correct in that assumption. Smile

What I did was simply split the larger rectangular div (the one that had previously contained two smaller rectangular divs) into two rectangular divs of equal size and alligned them along side each other. Then I inserted a small rectangular div for text inside each. I then split the background image in half and set it up in the two divs so it's seamless.

The only drawback to this is that I can't simply go in and change the stroke outline of the divs, since it's baked into the background image now. That should not be much of a concern for this application though... now if I were building a site that was going to have user selectable page styles that would change the colors of all the borders, etc. THEN I would have a problem with the approach I have taken here.

I do have a project coming up that will require me to do exactly that though (user selectable page styles) so I have copied down your reply here and will doubtless be calling upon it as a reference in the very near future.

Thank you again! Smile

-Sean

Revised code below if curious

Untitled Document

Revolutionary Live Chat Interface
Make sure every visitor to your site is greeted just like they had walked into your store
Superior Data Tracking Tools
Gather all of the data you need to satisfy your customer's preferences
Turn Web Persuader on or off and interact with customers according to your schedule
Use Web Persuader together with a live response center for 24 hour customer support

Website content copyright 2008, Web Optimizer INC.

Site design by PSO