hi folks,
here is a site i am working on for my bother:
http://www.dominicanwhite.com.au/
now, i am on mac and in firefox, safari and netscape my site renders as it should, the problem is on PC and in IE all the text is moved down the page?
any ideas why this may be the case and any remedies to correct it?
cheers in advance Works perfectly fine for me
unless you're testing in IE6? Yes, in IE6 text is moved down. I am not sure, but problem is in CSS. Try to insert z-index: 1; or z-index: 2; in CSS definition for div with text. I haven't other idea. I am newbie in CSS.
Sonam
would you happen to have a screenshot of it in IE 6??
I wish I could help now but I don't have time right at this moment, maybe later when I get back.
Best thing to test. Put 1px border around all your divs to see if any were shifted down if you put 1px border on divs that are next to each other and fit in a defined area like 2 divs side by side in a 750px, take out 2 px from their widths to accommodate for the 1px border. I hope that you understand that. Sometimes it helps to figure out where
Not sure what the 'float: top' is for on colTwo, but it shouldn't do anything, thus useless.
You have a container set to 700 px, then 2 cols inside it which when added together equal 700 (width+margins) It has something to do with the widths, maybe the 8px border around the container is taking away from the container, making it actually only 684px wide? Also try to make the 2 inside containers add up to 699 or somethign less then but not equal to 700, see how that works for you.
Good luck 
| coeus wrote: |
Not sure what the 'float: top' is for on colTwo, but it shouldn't do anything, thus useless.
You have a container set to 700 px, then 2 cols inside it which when added together equal 700 (width+margins) It has something to do with the widths, maybe the 8px border around the container is taking away from the container, making it actually only 684px wide? Also try to make the 2 inside containers add up to 699 or somethign less then but not equal to 700, see how that works for you.
Good luck |
The outside border doesn't matter.
If your width is 700px then the 8px border adds to it so in reality you have a 716px div.
The inside content though is as you pointed in the width of them together the probably cause of shifting down. If you have a 700px width container and 2 boxes inside that add to 700 as well, it would stretch the outside container, but since you defined it as 700px that means one of the boxes is going to be shifted down.
| Code: |
#colOne {
float: right;
width: 190px;
margin-top: 20px;
padding: 0 10px 0 20px;
}
#colTwo {
float: top;
margin-top: 0px;
width: 440px;
padding: 0 20px 0 20px;
}
|
change that to
| Code: |
#colOne {
float: right;
width: 189px;
margin-top: 20px;
padding: 0 10px 0 20px;
}
#colTwo {
float: left;
margin-top: 0px;
width: 440px;
padding: 0 20px 0 20px;
}
|
That way it's 699px within. If it still doesn't work, add margin-left and margin-right to be 0 in both style id's. | Quote: |
| would you happen to have a screenshot of it in IE 6?? |
I am geting this:
SonamIn the css declaration of colTwo; add position:absolute;
After this, it will work for IE 5.5 to 6, IE 7, FireFox 1-2, safari etc...
hi guys, and thanks for all the detailed responses. sorry i haven't been available for comment, my girl has just left for a indefinite trip to the UK 
anyway, i have managed to fix the text scroll issue and it seems to be all good now!
can those of you who have posted responses, please do a quick check just to see that it is all good?
cheers! Excuse me? You(owner of this site) wrote that it works correctly, but it doesn't in IE 6, text is still moved down(I checked it few minutes ago 
)
Hmmmm..... I hate IE 6, it always read code wrong, but i think you should do something like that:
| Code: |
#colOne {
float: left;
width: 190px;
margin-top: 20px;
padding: 0 10px 0 20px;
}
#colTwo {
float: left;
margin-top: 0px;
width: 440px;
padding: 0 20px 0 20px;
|
Both #colOne and #colTwo should have float: left;.
It won't change any visual aspects of site and it should work correctly.
Cheers 
hi wabik90,
yeah, i am confused now, cause i did make a few changes and then i previewed on a mates pc using ie and it looked fine, then i posted that reply, but then i checked at work and it was still not right!
i will go in and make those changes again and hope it will fix it!
cheers for the heads up!
ok guys, i have tried every option that has been suggested and still nothing is working.
i hope someone else can rectify this as the site is about to "go live" and i am concerned about all those using ie!
http://www.dominicanwhite.com.au/ . . . IE can drive you mad sometimes. Maybe you should try:
| Code: |
#colOne {
float: left;
width: 189px;
margin-top: 20px;
padding: 0 10px 0 20px;
}
#colTwo {
float: left;
margin-top: 0px;
width: 440px;
padding: 0 20px 0 20px;
|
very similar, but with 1px space. I don't know, maybe you have tried this, but it's hard to say what's wrong with your site(or rather with IE).
Cheers 
Hi, Please take a look of this to see if it is help !!
| Code: |
#header {
width: 710px;
height: 100px;
margin: 0 auto;
padding: 0;
border: 8px solid #ceaa6e;
border-bottom: none;
background: #A99C89 url(images/headerimage.jpg);
}
#content {
width: 710px;
margin: 0 auto;
border: 8px solid #ceaa6e;
border-top: none;
background: #ffffff;
}
#colOne {
float: right;
width: 189px;
margin-top: 20px;
margin-left: 0px;
margin-right: 0px;
padding: 0 10px 0 20px;
border: solid 1px #000000;
}
#colTwo {
position: relative;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
width: 440px;
padding: 0 20px 0 20px;
float: left;
border: solid 1px #000000;
} |
Download thanks very much blueray - that fixed it...
and i like how you put borders there so i could see what it was doing also
cheers mate... Just use Firefox...It's way better than IE.
