WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > Browser Compatibility > Strange problem with nested div's in IE

Reply
  Thread Tools Display Modes
Old 30th August 06, 01:37 AM   #1
emjay1
WLC Member
 
Join Date: Aug 2006
Posts: 2
Default Strange problem with nested div's in IE

Hi,
Sorry to post what is essentially a myspace problem, but rest assured I'm quite serious about web design and learning CSS/html in general, and I'm fairly competent, I'm not just some myspace n00b kid who wants a new profile look.

I'm currently creating my second div overlay layout for my myspace, trying to ensure compatibility for both Firefox (easy) and IE (grrrr).
Because I wanted the look of thick borders for my div areas, and IE places borders on the inside of the div compared to Firefox placing them on the outside edge of the div, I decided to use nested divs to come to a visually similar solution, ie. an absolutely positoned div with a relative ( inset left 8px top 8px) positioned div inside it to give a border effect.

Now this technique was working great for the layout in both browsers, there were no obvious differences between FF and IE, so I carried on adding more divs with extra content.
BUT, when I did a random check on how it was looking in IE, I saw that the 9th div onwards had problems - the inset divs were inset on the left by 16px instead of 8px as per my CSS coding....I double checked my code, but the affected divs have exactly the same code as the divs that look fine....

Here is the link to my experimental site (no links work and it is still half finished after finding this error) http://www.myspace.com/emjayillustration

You can see all is well in Firefox, but in IE, the 8th main div is misaligned...

For example here's the 8th main div css and html, this appears fine in IE:

(the last.fm music charts div)

.lastfmback {
background-color:56ffad; color:000000;
border:0px solid; border-color:888888; font-align: left;
width:560px; height:235px; letter-transform: uppercase; font-size: 10px; overflow:hidden;
position:absolute; z-index:2; left:49%; top:0%;
margin-left: -390px; margin-top:1350px;
visibility:visible;}

.lastfmfront {
background-color:028853; color:000000;
border:0px solid; border-color:888888; font-align: left;
width:544px; height:219px; letter-transform: uppercase; font-size: 10px; overflow:hidden;
position:relative; z-index:3; left:8; top:8; visibility:visible !important;}


and here's the html part that refers to it:

<div class="lastfmback">
<div class="lastfmfront">
<center>
<table class="showtable" width="350" border="0" cellpadding="8" cellspacing="0">
<td align="center">
<u><b>Most played artists:</u></b><br>
<img src="http://imagegen.last.fm/rocksandmoss2/oartists/10/lost_to_apathy.gif" border="0" />
</td>
<td align="center">
<u><b>This week:</u></b><br>
<img src="http://imagegen.last.fm/mossrocks/artists/10/lost_to_apathy.gif" border="0" />
</td>
</table>
<img src="http://images.gerpok.com/lastplay/emjayhaych.2.png">
</div>
</div>



But the div that is positioned next to it has the alignment problem, and here is the code for it, that I've checked and double checked....this is the first one with the problem:

(the 'album of the week' div)

.sowback {
background-color:56ffad; color:000000;
border:0px solid; border-color:888888; font-align: left;
width:226px; height:235px; letter-transform: uppercase; font-size: 10px; overflow:hidden;
position:absolute; z-index:2; left:49%; top:0%;
margin-left: 184px; margin-top:1350px;
visibility:visible;}

.sowfront {
background-color:028853; color:000000;
border:0px solid; border-color:888888; font-align: left;
width:210px; height:219px; letter-transform: uppercase; font-size: 10px; overflow:hidden;
position:relative; z-index:3; left:8; top:8; visibility:visible !important;}

<div class="sowback">
<div class="sowfront">
<img src="http://img.photobucket.com/albums/v335/emjayhaych/greenmyspace/albumoftheweek.jpg">
</div>
</div>



Does anyone have any idea why the inset divs from this point onward, eg. "sowfront", are inset by 16px on the left in IE when the code states 8px?

I'm getting really frustrated by this, I hate catering for Internet Explorer, and the only solution I can see at the moment, using conditional comments, I can't do it because myspace doesn't allow conditional comments! argh.....

Thanks a lot for any help or advice!

Mike
emjay1 is offline   Reply With Quote
Old 30th August 06, 09:37 AM   #2
stef686
WLC Member
 
Join Date: May 2006
Posts: 42
Default Re: Strange problem with nested div's in IE

In all IE's wisdom, it will occasionally double these measurements. I've not seen any consistency so can't really tell why it does it, but there is a simple fix:

left:8px !important;
left:4px;

IE does not understand the !important command and so will override it with the 4px that is declared afterwards. FF and other browsers that do understand it however will not override the 8px.
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
stef686 is offline   Reply With Quote
Old 1st September 06, 05:28 PM   #3
emjay1
WLC Member
 
Join Date: Aug 2006
Posts: 2
Default Re: Strange problem with nested div's in IE

aaah, thanks a lot, I'm kicking myself now, I really should have thought of using the !important attribute, because I do know about it, don't know why it slipped my mind...but yeah thanks, that works great
emjay1 is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Not Ie or firefox problem..? Div problem I think Bouzy Browser Compatibility 1 19th July 07 08:16 PM
Background height problem in FireFox but work in IE EthanCote Browser Compatibility 3 16th March 07 07:34 AM
Wierd IE7 120 DPI CSS Problem ste-jenkins Browser Compatibility 0 22nd January 07 10:47 AM
dropdown menus challenge for pro's: z-index problem in IE metheberg Browser Compatibility 3 18th October 06 06:03 PM
Form Problem RyanGannon HTML & XHTML 1 14th October 06 07:26 PM


All times are GMT. The time now is 03:42 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.