This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > April 2006 > ok last question i promise
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
ok last question i promise
|
|
| Paul Watt 2006-04-05, 7:18 pm |
| Hi,
Ok, I've solved most of the layout issues I was having with the template I'm
building and it looks ok in both IE and FF.
One thing remains though and its driving me nuts. I've got two divs's
displayed next too each other to make two cols, the left hand div set at a
width of 250px, the right hand div no width set.
In FF the right div starts at the edge of the left div and displays
correctly, however in IE the right div starts at the edge of the page
(although the text in the div starts at the edge of the left div).
So If i set margin-left on the maincontent div to 255px in IE it sits where
I want, but in FF it sits 255px away from the left div which just looks
wrong.
The URL is: http://www.paulwatt.info/test/turn/ .
and http://www.paulwatt.info/test/turn/css/turnlayout.css
I've been searching google and I cant find a answer. I suspect that FF is
behaving properly and IE is doing its usual thing.
many thanks in advance
Paul
--
http://www.paulwatt.info
| |
| Noozer 2006-04-05, 7:18 pm |
|
"Paul Watt" <paulioNOSPAM@wattio.freeserve.co.uk> wrote in message
news:49hu69Fokog6U1@individual.net...
> Hi,
> Ok, I've solved most of the layout issues I was having with the template
> I'm building and it looks ok in both IE and FF.
> One thing remains though and its driving me nuts. I've got two divs's
> displayed next too each other to make two cols, the left hand div set at a
> width of 250px, the right hand div no width set.
> In FF the right div starts at the edge of the left div and displays
> correctly, however in IE the right div starts at the edge of the page
> (although the text in the div starts at the edge of the left div).
>
> So If i set margin-left on the maincontent div to 255px in IE it sits
> where I want, but in FF it sits 255px away from the left div which just
> looks wrong.
Because "leftcell" is floated, it's not counted when placing the
"maincontent" div.
I think both browsers have it wrong...
Firefox, because it's not truly floating the "leftcell" div.
IE, because it takes into account the foated div, but then doesn't apply the
content based on it.
Try sqashing your browsers narrower and you'll see IE starts wrapping the
content at the left margin.
| |
|
| Paul Watt wrote:
> Hi,
> Ok, I've solved most of the layout issues I was having with the template I'm
> building and it looks ok in both IE and FF.
> One thing remains though and its driving me nuts. I've got two divs's
> displayed next too each other to make two cols, the left hand div set at a
> width of 250px, the right hand div no width set.
> In FF the right div starts at the edge of the left div and displays
> correctly, however in IE the right div starts at the edge of the page
> (although the text in the div starts at the edge of the left div).
>
> So If i set margin-left on the maincontent div to 255px in IE it sits where
> I want, but in FF it sits 255px away from the left div which just looks
> wrong.
>
> The URL is: http://www.paulwatt.info/test/turn/ .
> and http://www.paulwatt.info/test/turn/css/turnlayout.css
>
..leftcell{
margin-top:5px;
width: 250px;
position: absolute;
}
Look into FLOAT, and lose position:absolute
| |
| Paul Watt 2006-04-05, 7:18 pm |
|
"Tony" <tony23@dslextreme.WHATISTHIS.com> wrote in message
news:1237tm46kcaq314@corp.supernews.com...
> Paul Watt wrote:
>
> .leftcell{
> margin-top:5px;
> width: 250px;
> position: absolute;
> }
>
> Look into FLOAT, and lose position:absolute
I tried Float but it wasnt working for me, so I had to resort to
position:absolute.
| |
|
| Paul Watt wrote:
>
>
> I tried Float but it wasnt working for me, so I had to resort to
> position:absolute.
What happened when you used float?
| |
| Paul Watt 2006-04-05, 7:19 pm |
|
"Tony" <tony23@dslextreme.WHATISTHIS.com> wrote in message
news:123856258ac158f@corp.supernews.com...
> Paul Watt wrote:
>
>
> What happened when you used float?
I had two cells leftcell and maincontent; I had leftcell (float:left;
width:250px;) and maincontent(no float,margin-left:255px;). IE and FF
couldnt decide where to start counting the 255px from because leftcell was
floated.
Paul
| |
|
| In article <49ij4oFp059oU1@individual.net>,
Paul Watt <paulioNOSPAM@wattio.freeserve.co.uk> wrote:
>I had two cells leftcell and maincontent; I had leftcell (float:left;
>width:250px;) and maincontent(no float,margin-left:255px;). IE and FF
>couldnt decide where to start counting the 255px from because leftcell was
>floated.
Try and see what happens if you set a margin-left: -1px; in the
left-floated box. It fixes up a similar problem in NS4.
See: http://realworldstyle.com/2col.html
I have found this to be a very useful example for my own page layouts.
-A
| |
|
| Paul Watt wrote:
> "Tony" <tony23@dslextreme.WHATISTHIS.com> wrote in message
> news:123856258ac158f@corp.supernews.com...
>
>
> I had two cells leftcell and maincontent; I had leftcell (float:left;
> width:250px;) and maincontent(no float,margin-left:255px;). IE and FF
> couldnt decide where to start counting the 255px from because leftcell was
> floated.
What happens if you leave off the margin-left:255px?
| |
| Neredbojias 2006-04-05, 7:19 pm |
| To further the education of mankind, "Paul Watt"
<paulioNOSPAM@wattio.freeserve.co.uk> declaimed:
> Hi,
> Ok, I've solved most of the layout issues I was having with the
> template I'm building and it looks ok in both IE and FF.
> One thing remains though and its driving me nuts. I've got two divs's
> displayed next too each other to make two cols, the left hand div set
> at a width of 250px, the right hand div no width set.
> In FF the right div starts at the edge of the left div and displays
> correctly, however in IE the right div starts at the edge of the page
> (although the text in the div starts at the edge of the left div).
>
> So If i set margin-left on the maincontent div to 255px in IE it sits
> where I want, but in FF it sits 255px away from the left div which
> just looks wrong.
>
> The URL is: http://www.paulwatt.info/test/turn/ .
> and http://www.paulwatt.info/test/turn/css/turnlayout.css
Try adding left:0; to your .leftcell css. (Untried.)
--
Neredbojias
Infinity can have limits.
| |
| Paul Watt 2006-04-05, 7:19 pm |
|
"Neredbojias" <http://www.neredbojias.com/fliam.php?cat=alt.html> wrote in
message news:Xns979C8720F2950httpwwwneredbojiasco@208.49.80.251...
> To further the education of mankind, "Paul Watt"
> <paulioNOSPAM@wattio.freeserve.co.uk> declaimed:
>
>
> Try adding left:0; to your .leftcell css. (Untried.)
>
All sorted now using a mix of absolute positioning and a IE browser hack!
Thanks any way
Paul.
| |
| dorayme 2006-04-05, 7:19 pm |
| In article <49ij4oFp059oU1@individual.net>,
"Paul Watt" <paulioNOSPAM@wattio.freeserve.co.uk> wrote:
>
> I had two cells leftcell and maincontent; I had leftcell (float:left;
> width:250px;) and maincontent(no float,margin-left:255px;). IE and FF
> couldnt decide where to start counting the 255px from because leftcell was
> floated.
They do decide, it is just that they decide differently to each
other. And IE deviates from the css standards. If you left float
a nav block, IE displaces the whole of the next block, not just
its content (eg, words).
It is a headache, true, but you need to get to grips with it, it
is really a fundamental if you are going to design with css.
If you want to avoid a margin on your content block in which your
float sits, then you can use a left float on the content block as
well.
You need now to watch for IE doubling float margins too, these
are all horrible bugs. There are no end of tutes on these things.
http://www.positioniseverything.net...led-margin.html
for this last.
You could read
http://www.digital-web.com/articles...tandards_compli
ant_ie/
and
http://www.positioniseverything.net/floatmodel.html
--
dorayme
| |
| Beauregard T. Shagnasty 2006-04-05, 7:19 pm |
| Paul Watt wrote:
>
> All sorted now using a mix of absolute positioning and a IE browser hack!
> Thanks any way
How come you want me to scroll two different areas to read your content,
Paul? Your maincontent box is taller than my browser canvas, so I have
to scroll both the content div *and* the main viewport to read the
bottom of the text.
If you have a tall browser window, shorten up the height to see what I
mean.
--
-bts
-Warning: I brake for lawn deer
| |
| dorayme 2006-04-05, 7:19 pm |
| In article <12388ij5pi4hl3a@corp.supernews.com>,
Tony <tony23@dslextreme.WHATISTHIS.com> wrote:
> Paul Watt wrote:
>
> What happens if you leave off the margin-left:255px?
If he were to leave off the margin then in good and compliant
browsers the main would start at the left edge of the window,
same as with the float, and only the content would be displaced.
It is altogether better for the whole content block to be clear
of the float when you are using the float method to create
columns.
Floating for columns is a clever adaptation of the idea of
allowing text to wrap around pics, but it needs careful attention.
--
dorayme
| |
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|