...

View Full Version : IE lowers content away from page



spngebob111
02-21-2009, 03:44 PM
Hey guys,

My site looks fine in firefox but in IE6 it lowers the content section away from the page, see the link.

http://winuser.widget-it.com

Can anyone suggest away to fix this ?

Thanks for your time,

Rowsdower!
02-22-2009, 01:02 AM
Try adding this to the VERY TOP of your CSS:
* {margin:0;padding:0;}

spngebob111
02-22-2009, 01:36 AM
Thanks, I just tried it but im afraid it didnt make any difference.

Any other ideas ?

Rowsdower!
02-22-2009, 01:48 AM
I don't have IE 6 on this machine so I can only guess at random from this point on. The margin:0;padding:0; is often the solution, but if it's not working for your page you'll need to find another workaround.

One idea is to use a conditional statement for IE6 to add a separate CSS file. This separate CSS file would only need to include the code snippet to fix the margin or padding that offends your design.

Run a google search on conditional statements in HTML for IE6 to get a start.

Rowsdower!
02-22-2009, 02:04 AM
I just did a browsershot of your page in IE6 here (http://api.browsershots.org/png/original/e6/e6717af021eb050a48c12ebd922951c7.png). I see what you are talking about. That looks like an issue with width. Decrease the width of either your floated div or the other content div and see if that slides up.

spngebob111
02-22-2009, 02:28 AM
Thanks for doing that.

I have tried experimenting with the content width but it seemed to make no difference.

It was the .main width I was editing

I have included some of the code that controls the structure to show you.

Your time is really appreciated.



/*---------------------------------------------------------structure---*/

#body {
background:#4c618b url(uploads/images/tail.gif) repeat-x 0 0;
}
.main {
width:911px;
}

/*-------------------------------------header---*/
#top {
height:122px;
overflow:hidden;
}
#header {
background:url(uploads/images/header.jpg) no-repeat right 12px;
height:235px;
overflow:hidden;
}

#logo {
float:left;
width:500px
}
#logo .space {
padding:39px 0px 0px 38px;
}
#topmenu {
height:51px;
padding:0px 10px 0px 10px;
}
#search {
float:right;
width:249px;
}
#banner {
height:230px;
margin-bottom:10px;
}
#banners {
background:url(uploads/images/banners-bg.jpg) repeat-x 0 0 #204381;
min-height:112px; height:auto !important; height:112px;
margin-bottom:10px;
width:100%;
overflow:hidden;
}
.banners-top-right {
background:url(uploads/images/banners-top-right.jpg) no-repeat right 0;
}
.banners-top-left {
background:url(uploads/images/banners-top-left.jpg) no-repeat 0 0;
}
.banners-bottom-right {
background:url(uploads/images/banners-bottom-right.jpg) no-repeat right bottom;
min-height:112px; height:auto !important; height:112px;
}
.banners-bottom-left {
background:url(uploads/images/banners-bottom-left.jpg) no-repeat 0 bottom;
}

/*-------------------------------------content---*/
#content {
width:100%;
}
.corner-top-left {
background:url(uploads/images/corner-top-left.gif) no-repeat 0 0 #fff;
}
.corner-top-right {
background:url(uploads/images/corner-top-right.gif) no-repeat right 0;
}
.corner-bottom-left {
background:url(uploads/images/corner-bottom-left.gif) no-repeat 0 bottom;
width:100%;
}
.corner-bottom-right {
background:url(uploads/images/corner-bottom-right.gif) no-repeat right 0;
width:100%;
}
.border-bottom {
background:#fff;
margin:0px 14px 0px 14px;
}
#content-indent {
padding:9px 10px 0px 10px;
}
#indent {
padding:33px 20px 0px 26px;
}
#content-indent .width {
overflow:hidden;
}
.article-top-left {
background:url(uploads/images/article-top-left.gif) no-repeat 0 0 #fff6bf;
}
.article-top-right {
background:url(uploads/images/article-top-right.gif) no-repeat right 0;
width:100%;
}
.article-bottom-left {
background:url(uploads/images/article-bottom-left.gif) no-repeat 0 bottom;
}
.article-bottom-right {
background:url(uploads/images/article-bottom-right.gif) no-repeat right bottom;
}
#right, #left {
background:url(uploads/images/box-top.gif) no-repeat 0 0 #d4e3f6
}
#right .bottom, #left .bottom {
background:url(uploads/images/box-bottom.gif) no-repeat 0 bottom;
z-index:99;
padding:0px 0px 5px 0px;
}
#right {
float:right;
width:218px;
}
#left {
float:left;
width:218px;
}
#container {
margin:0px 226px 0px 226px;
}
* html #container {
margin:0px 223px 0px 223px;
}
#container2 {
margin:0px 226px 0px 0px;
}
* html #container2 {
margin:0px 223px 0px 0px;
}
#container3 {
margin:0px 0px 0px 226px;
}
* html #container3 {
margin:0px 0px 0px 223px;
}
#container23 {
margin:0px 0px 0px 0px;
}
* html #container23 {
margin:0px 0px 0px 0px;
}
.content-top {
background:url(uploads/images/content-top.gif) repeat-x 0 0;
width:100%;
}
.content-top-left {
background:url(uploads/images/content-top-left.gif) no-repeat 0 0;
}
.content-top-right {
background:url(uploads/images/content-top-right.gif) no-repeat right 0;
min-height:242px; height:auto !important; height:242px;
}
.comp-cont {
width:100%;
}
.clr {
clear:both;
}
.user1, .user2, .user3 {
width:25%;
float:left;
}
.user4 {
width:24%;
float:left
}
.user1, .user2, .user3 {
background:url(uploads/images/banners-border.gif) repeat-y right 0;
min-height:112px; height:auto !important; height:112px;
}
.user1 .space, .user2 .space, .user3 .space, .user4 .space {
padding:15px 10px 10px 23px;
color:#c2e3ff;
font-size:13px;
}

.user1 a, .user2 a, .user3 a, .user4 a {
color:#c2e3ff;
font-size:13px;
}
.user1 a:hover,
.user2 a:hover,
.user3 a:hover,
.user4 a:hover,
.user1 a:visited,
.user2 a:visited,
.user3 a:visited,
.user4 a:visited {
color:#c2e3ff;
font-size:13px;
}

Excavator
02-22-2009, 02:56 AM
Hello spngbob111,
I keep coming back to this and looking but I still haven't found a cause.
Float drop can be really hard to debug, especially if you don't have the code/images local so you can test code as you edit.
At first I thought it might be your box model (http://www.w3.org/TR/CSS2/box.html)but it appears to be right - as long as I didn't miss something else in your huge CSS files.
I suppose it could be that IE6 is not seeing your * html hack... that would mean the 3px bug is what's dropping your float. Maybe.
Maybe you can have a look through this page and see if you're being affected by any of the better known bugs - http://www.positioniseverything.net/explorer.html

spngebob111
02-22-2009, 09:51 AM
Thanks guys, but still no luck,

I have added a style sheet that I was using before is fixed some issues with the text but still not the major issue.

Heres the new style sheet:



/* CSS Document */
* {
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}

html {
height:100%
}

body {
text-align:center
}

table {
border-collapse:collapse;
border:0px;
width:100%;
}

td {
vertical-align:top
}

th {
text-align:left;
vertical-align:top
}

img {
border:none
}

h1 {
font-size:130%
}
h2 {
font-size:120%
}
h3 {
font-size:110%
}
h4 {
font-size:110%
}


p {
padding:0px 0px 10px 0px;
}

textarea .inputbox {
width:300px;
height:100px;
margin:0px 0px 5px 0px;
}

select {
height:auto;
margin:0px 0px 2px 0px;
vertical-align:middle
}

ul {
list-style:disc;
margin:0px 0px 0px 15px;
}
ol {
margin:0px 0px 0px 15px;
}


.width {
width:100%
}
.main {
margin:auto;
text-align:left
}

spngebob111
02-23-2009, 09:23 AM
If its this hard to solve, would you guys recommend just leaving it. I dont think that many people use IE6 ?

Thanks again,

Fisher
02-23-2009, 01:27 PM
The problem is in your stylesheet_4.css file:

.content-top {
background:url(../images/content-top.gif) repeat-x 0 0;
width:100%;
}
This 100% is inheriting a width of 619px from it's parent. You can fix this by assigning a fixed value to the width:

.content-top {
background:url(../images/content-top.gif) repeat-x 0 0;
width:616px;
}

This should solve your problem. You have a "3 pixel jog" in ie6, so by making it 3 pixels less, it moves up.

Excavator
02-23-2009, 04:41 PM
If its this hard to solve, would you guys recommend just leaving it. I dont think that many people use IE6 ?

Thanks again,

Alienating up to 20% of the visitors to your site does not seem like good business.


Good catch on the 3px jog Fisher!
spngebob111, you need to give him a thanks for that one. Just hit that "Thank user for this helpful post" button.

spngebob111
02-24-2009, 01:02 AM
I just wanted to thank you both for all your time and effort. I wouldnt have been able to solve it without you guys.

The only problem is it kind of shrinks the content area to much so its not aligned with the banner above it. I fixed this by changing 616 to 665 im not sure why that worked though ?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum