true width:100%; divs, are they possible on myspace with IE?, Help appreciated :) Options

[xTHExDUDEx]

So, I'm having absolutely no fun trying to (yet again) baby step Internet Explorer through my layout. While Firefox is having no trouble at all stretching absolute divs to 100% width, Internet Explorer seems to treat it as relative anyway and so as far as I can make out is becoming stuck inside parent elements.

I guess what I'm asking is this: Is this a common problem and is there an IE hack readily available?

When I say IE, I mean IE7 specifically although I'd imagine IE6 and below behave the same.

Thank you very much for having a look, any help is appreciated!

Cheers!


Screens:

Firefox:


Internet Explorer 7:

[xTHExDUDEx]

Hey!
I've stripped some non-relevant html and css as I don't want some of it to be ripped off just yet.

Thanks.


HTML:

CODE

<div class="welcome_gradient">
</div>

<div class="welcome_bg_color">
</div>

<div class="about_us_gradient">
</div>

<div class="about_us_bg_color">
</div>

<div class="info_gradient">
</div>

<div class="info_bg_color">
</div>


<div class="container">

<div class="main-nav">



<div class="clear-both">&nbsp;</div>
</div>

</div>

<div class="main-nav2">



<div class="clear-both">&nbsp;</div>
</div>

</div>

<div class="main-nav3">



<div class="clear-both">&nbsp;</div>
</div>

</div>

<div class="main-nav4">



<div class="clear-both">&nbsp;</div>
</div>

</div>

<div class="main-nav5">



<div class="clear-both">&nbsp;</div>
</div>

</div>

<div class="main-nav6">



<div class="clear-both">&nbsp;</div>
</div>

</div>





</div>

CSS:

CODE

<style type="text/css">

body {
margin-top:10200px;
}

div div select, div div form {display:none !important;}
select { filter:alpha(opacity=0); opacity:0.0; }

.userProfiledetail, .userProfileURL, .userProfileSchool,
.interestsAndDetails, .friendsComments,.extendedNetwork,
.latestBlogEntry, .friendSpace, .orangetext15, .navigationbar, .profileInfo, .contacttable { display:none;}
a.text, table div font a, table div div {visibility:hidden;}
table tr td div font {display: none;}
body div table td form {display:none!important;}
table, td, tr{ background-color:transparent;}
object, embed{ width:0px; height:0px;}
body div td div div select {width:0px !important;}





.welcome_gradient {
position:absolute;
top:0px;
left:0px;
width:100%;
height:70px;
background-image:url(http://img511.imageshack.us/img511/990/colorgradient1xm1.gif);
background-position:top left;
background-repeat:repeat-x;
}

.welcome_bg_color {
position:absolute;
top:70px;
left:0px;
width:100%;
height:2375px;
background-color:000000;
}

.about_us_gradient {
position:absolute;
top:2375px;
left:0px;
width:100%;
height:100px;
background-image:url(http://img413.imageshack.us/img413/8427/colorgradient2kh9.gif);
background-position:top left;
background-repeat:repeat-x;
}

.about_us_bg_color {
position:absolute;
top:2475px;
left:0px;
width:100%;
height:1700px;
background-color:00ff00;
}

.info_gradient {
position:absolute;
top:4175px;
left:0px;
width:100%;
height:100px;
background-image:url(http://img150.imageshack.us/img150/9052/colorgradient3iw2.gif);
background-position:top left;
background-repeat:repeat-x;
}

.info_bg_color {
position:absolute;
top:4275px;
left:0px;
width:100%;
height:1700px;
background-color:0000cc;
}




.container{
visibility:visible;
position:absolute;
width:790px;
height:10800px;
top:0px;
left:50%;
margin-left:-395px;
}

.main-nav, .main-nav2, .main-nav3, .main-nav4, .main-nav5, .main-nav6{
visibility:visible;
position:absolute;
top:0px;
left:50%;
margin-left:-395px;
height:29px;
float:left;
background-image:url(http://img215.imageshack.us/img215/594/navbgrt3.gif);
background-repeat:repeat-x;
background-position:top left;
width:790px;
}

.main-nav2 {

}

.main-nav3 {

}

.main-nav4 {

}

.main-nav5 {

}

.main-nav6 {

}

.main-nav ul, .main-nav li,
.main-nav2 ul, .main-nav2 li,
.main-nav3 ul, .main-nav3 li,
.main-nav4 ul, .main-nav4 li,
.main-nav5 ul, .main-nav5 li,
.main-nav6 ul, .main-nav6 li {
padding:0px;
margin:0px;
list-style-type:none;
}

.main-nav ul, .main-nav2 ul, .main-nav3 ul, .main-nav4 ul, .main-nav5 ul, .main-nav6 ul{
height:29px;
line-height:29px;
background-image:url(http://img246.imageshack.us/img246/8041/navbargl2.gif);
background-position:right;
background-repeat:no-repeat;
float:left;
padding:0px 1px 0px 0px;
margin:0px 0px 0px 10px;
}

.main-nav li, .main-nav2 li, .main-nav3 li, .main-nav4 li, .main-nav5 li, .main-nav6 li{
height:29px;
line-height:29px;
display:inline;
position:relative;
float:left;
width:80px;
text-align:center;
}

.main-nav li a, .main-nav2 li a, .main-nav3 li a, .main-nav4 li a, .main-nav5 li a, .main-nav6 li a{
visibility:visible;
height:29px;
width:80px;
text-align:center;
float:left;
background-image:url(http://img246.imageshack.us/img246/8041/navbargl2.gif);
background-position:left;
background-repeat:no-repeat;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:300;
}



.main-nav li a:link, .main-nav li a:visited,
.main-nav2 li a:link, .main-nav2 li a:visited,
.main-nav3 li a:link, .main-nav3 li a:visited,
.main-nav4 li a:link, .main-nav4 li a:visited,
.main-nav5 li a:link, .main-nav5 li a:visited,
.main-nav6 li a:link, .main-nav6 li a:visited {
color:FFFFFF;
text-decoration:none;
}

.main-nav li.active a, .main-nav li a:hover,
.main-nav2 li.active a, .main-nav2 li a:hover,
.main-nav3 li.active a, .main-nav3 li a:hover,
.main-nav4 li.active a, .main-nav4 li a:hover,
.main-nav5 li.active a, .main-nav5 li a:hover,
.main-nav6 li.active a, .main-nav6 li a:hover {

background-image:url(http://img212.imageshack.us/img212/7838/activeuf2.gif);
background-repeat:no-repeat;
background-position:left;
}




</style>

Any ideas?

[xTHExDUDEx]

Thanks, and of course I don't use IE7, no self respecting developer/designer would although unfortunately most of the western world still use it.

Firefox FTW!

EDIT: By fixed width you mean a px value? I need it to be 100% so I can stretch an image or color across any resolution, you see?

[vintage-toile]

does position:absolute not work then?

[xTHExDUDEx]

I use IE7 as a test at the moment yes, although I will test IE6 at some point as well.

And no, position:absolute; does not kick IE7 in to shape, although it does work for Firefox. As usual Micro$hit thinks it can make up it's own w3c...

[vintage-toile]

i found last night that what worked for me was:

CODE

left:0%;
top:0%;
margin-left:numberhere;
margin-top:numberhere;

instead of just left and top or margin left.
i adjusted the percentages to fit half to top/left and somehow this worked..you could try that?

[xTHExDUDEx]

Could you be more specific, for which div? .container or .welcome_gradient?

And could you explain your values? Thank you very much for helping, if you could just clear that up, thanks!

EDIT: I see now that you were referring to .welcome_gradient as the left and top have % values in your quote.

I tried a few values but I don't understand your concept.

[vintage-toile]

sorry it was just something i was experimenting with last night with my latest layout "mean girls?" its on myspace layouts here, so you can take a look at that. in firefox and differnet versions of IE the navigation was moved about quite annoyingly, but when i used the code (different to the others) it worked.
such as follows:

CODE

.navigate {
position: absolute;
overflow:auto;
left: 10%;
top: 0%;
margin-left: 525px;
margin-top: 240px;
background-color:transparant;
font-family:times new roman;
font-size:10px;
color:black;
font-weight:normal;
width:300px;
height:200px;
padding:0;
}

this was the area which moved, you should see the margin-left and percentage change?
and this was the area which stayed how i wanted:

CODE

.main {
position: absolute;
overflow:auto;
top:665px;
left:120px;
background-color:transparant;
font-family:tahoma;
font-size:12px;
color:FFFFFF;
font-weight:normal;
height:230px;
width:475px;
margin:0;
padding:0;
}

so here you should see the coding is very differnet to before.
those are my values, you will need to play about with yours until it fits both browsers?

and i'd think it was welcome gradient...but i'd try it out in both?

at the moment myspace is being really funny and iffy with everything because of the changes the mods are making there, so it could just be you're trying to do something beyond the HTML capacity of the servers at the moment on myspace?

just a thought

[xTHExDUDEx]

This cannot result in the image being spanned 100% across any resolution as margin-left:10%; (or anything over 0) will always force any browser to push off the left side destroying the desired effect.

Thanks very much for trying help out all the same though.

I'm still in firm belief that the coding is sound and IE's syntax is differing from what I'm used to, being a FF and w3c fan...

Any other suggestions are more than welcomed, cheers!!


///////////////////////////////////////////////////////////////


EDIT:

I thought of a possible IE7 hack, however it yielded some unexpected results...


Altered CSS:

CODE

.welcome_gradient {
position:absolute;
top:0%;
left:50%;
margin-left:-50%;
width:100%;
height:70px;
background-image:url(http://img511.imageshack.us/img511/990/colorgradient1xm1.gif);
background-position:top left;
background-repeat:repeat-x;
}

By using left:50%; and margin-left:-50%; Firefox remains no different as expected. IE7 produces this:



Any takers?

[xTHExDUDEx]

Sorry to double post, need a bump, new info as well.

I deleted everything except the following CSS and HTML and still nothing, so it is definately IE7 that is the culprit here.

CSS:

CODE

<style type="text/css">

body {
margin-top:10200px;
}

div div select, div div form {display:none !important;}
select { filter:alpha(opacity=0); opacity:0.0; }

.userProfiledetail, .userProfileURL, .userProfileSchool,
.interestsAndDetails, .friendsComments,.extendedNetwork,
.latestBlogEntry, .friendSpace, .orangetext15, .navigationbar, .profileInfo, .contacttable { display:none;}
a.text, table div font a, table div div {visibility:hidden;}
table tr td div font {display: none;}
body div table td form {display:none!important;}
table, td, tr{ background-color:transparent;}
object, embed{ width:0px; height:0px;}
body div td div div select {width:0px !important;}





.welcome_gradient {
position:absolute;
top:0%;
left:50%;
margin-left:-50%;
width:100%;
height:70px;
background-image:url(http://img511.imageshack.us/img511/990/colorgradient1xm1.gif);
background-position:top left;
background-repeat:repeat-x;
}

</style>

HTML:

CODE

<div class="welcome_gradient">
</div>

Does a mod mind if I take this to the Webmasters' Corner?

EDIT: applying the css to body gives the desired effect I require from a div, I opened a new topic with a related question.

Also: Using tables as an alternative doesn't help any.

I can't be the only person to ever encounter this can I?





I've given up, I can pretty much confirm that IE7 does not support 100% AP elements within myspace.

Mods can go ahead and close this.