Newbie question re CSS margins in IE

D

damiensawyer

Hi,

I'm wondering if someone could help me with the peculiarities of CSS
within IE. I wish to create a <DIV> in the stylesheet that has a fixed
left and right margin (100px from the left of the window and 10px from
the right). This works fine in Firefox, however fails in IE if I don't
have 'enough' text inside the div - by enough, it appears that if the
text doesn't wrap over the whole line, then the 'box' difined by the
DIV doesn't cover the fufl width that I want.

Can someone please point me in the direction of a workaround? I've
tried to give a full working example of the issue below.

Thanks in advance,



Damien Sawyer



<html>
<head>
<style>
body
{
font-family:Verdana;
Font-Size:0.8em;
}

..myDiv
{
border-width:1px;
border-style:solid;
border-color: black;
position:absolute;
left:100px;
right:10px;
height:100%;
}
</style>

</head>
<body>
<p>I want the div to position accordng to the left and right settings
in the style. It works
fine for Firefox, however, in IE only works when there is more than
"one lines" worth
of text in there. I need it to fill the screen when there is no text.
</p>
<p>Any ideas?</p>
<div class="myDiv">
Sample text inside div
</div>

</body>
</html>
 
N

Neredbojias

With neither quill nor qualm, (e-mail address removed) quothed:
Hi,

I'm wondering if someone could help me with the peculiarities of CSS
within IE. I wish to create a <DIV> in the stylesheet that has a fixed
left and right margin (100px from the left of the window and 10px from
the right). This works fine in Firefox, however fails in IE if I don't
have 'enough' text inside the div - by enough, it appears that if the
text doesn't wrap over the whole line, then the 'box' difined by the
DIV doesn't cover the fufl width that I want.

Can someone please point me in the direction of a workaround? I've
tried to give a full working example of the issue below.
Click to expand...

_Why_ do you need the div to be "full width" with less text?

A url would help. Almost certainly, the solution to your real problem
is simple.
 
D

damiensawyer

I need it to be full width with less text for page layout and
formatting.

I would like to have a panel that displays at full width whether there
is text in it or not. Sometimes there will be, sometimes there won't
be. Surely the layout of the form/page shouldn't change if there is no
text in it?
A url would help. Almost certainly, the solution to your real problem
is simple.
Click to expand...

Please forgive me, but why do you need a URL?? I realise that a sample
can be extremely important in solving these issues, and, accordingly, I
have provided a full sample below. All that you need to do is save it
to a sample.html file and open it in a browser. All of about 10 seconds
work.

I chose to do it this way because, as this is a Usenet post, it will be
archived and searchable by many people for many years - long after the
URL you requested of me would have been removed. This way, there is a
permanent record of the question (and hopefully a solution) for those
many people over those many years.

I don't understand what you mean by "Almost certainly, the solution to
your real problem is simple". Can you please ellaborate? Or maybe tell
me this simple solution?

Thanks very much in advance,



Damien
 
N

Neredbojias

With neither quill nor qualm, (e-mail address removed) quothed:
I need it to be full width with less text for page layout and
formatting.

I would like to have a panel that displays at full width whether there
is text in it or not. Sometimes there will be, sometimes there won't
be. Surely the layout of the form/page shouldn't change if there is no
text in it?


Please forgive me, but why do you need a URL?? I realise that a sample
can be extremely important in solving these issues, and, accordingly, I
have provided a full sample below. All that you need to do is save it
to a sample.html file and open it in a browser. All of about 10 seconds
work.

I chose to do it this way because, as this is a Usenet post, it will be
archived and searchable by many people for many years - long after the
URL you requested of me would have been removed. This way, there is a
permanent record of the question (and hopefully a solution) for those
many people over those many years.

I don't understand what you mean by "Almost certainly, the solution to
your real problem is simple". Can you please ellaborate? Or maybe tell
me this simple solution?

Thanks very much in advance,
Click to expand...

Ie6 doesn't handle the following correctly:

position:absolute;
left:100px;
right:10px;

You need a workaround.
 
D

Damien Sawyer

um...duh.

From my original post....

"Can someone please point me in the direction of a workaround?"

It's really annoying when people respond to newsgroups questions to which
they don't know the answer... :-(

Lets refer back to your original (annoying) statement,

"Almost certainly, the solution to your real problem is simple"

It wouldn't seem that it's that simple to you now, would it??
 
J

Jonathan N. Little

Damien said:
um...duh.

From my original post....

"Can someone please point me in the direction of a workaround?"

It's really annoying when people respond to newsgroups questions to which
they don't know the answer... :-(
Click to expand...
<snip>

Top posters are also annoying because is jumbles the flow of the
conversation.

A URL can be helpful because some folks who are having problems and ask
questions not only do not know the answer but also may may know what to
include in their 'code example' and can make it difficult to locate the
problem


Maybe what Neredbojias meant here is not so much of a 'workaround' but a
'rethinking of your strategy'. Of course it would help to understand the
purpose of this pixel-precision layout. You may have to let it hang and
what for the Redmond boys to follow the specs or do something different.
Remember it is a webpage not a magazine page.
 
N

Neredbojias

With neither quill nor qualm, Damien Sawyer quothed:
um...duh.

From my original post....

"Can someone please point me in the direction of a workaround?"

It's really annoying when people respond to newsgroups questions to which
they don't know the answer... :-(
Click to expand...

It's really annoying when people don't recognize the answers they
sought. I showed you what was wrong, thus pointing you in the direction
of a workaround.
Lets refer back to your original (annoying) statement,

"Almost certainly, the solution to your real problem is simple"

It wouldn't seem that it's that simple to you now, would it??
Click to expand...

Oh, but it is. Extremely simple. Much simpler than cutting and pasting
markup which should have been examined from a url regardless of its
historic impermanence. Unfortunately, you have annoyed me so maybe
Jukka or Alan or David or Jonathan or somebody can come to your rescue
because I'm through.
 
D

Damien Sawyer

Thanks Jonathon,

You speak wisdom.


DS



Jonathan N. Little said:
<snip>

Top posters are also annoying because is jumbles the flow of the
conversation.


A URL can be helpful because some folks who are having problems and ask
questions not only do not know the answer but also may may know what to
include in their 'code example' and can make it difficult to locate the
problem



Maybe what Neredbojias meant here is not so much of a 'workaround' but a
'rethinking of your strategy'. Of course it would help to understand the
purpose of this pixel-precision layout. You may have to let it hang and
what for the Redmond boys to follow the specs or do something different.
Remember it is a webpage not a magazine page.
Click to expand...
 
D

Damien Sawyer

Well Neredbojias, I sincerely appologise for annoying you.

If anyone is interested (and for the sake of permanance), one workaround is
to include an empty table inside the div, set it's width to 100% and it's
border to 0.

IE really does suck.

Cheers



DS


<html>
<head>
<style>
body
{
font-family:Verdana;
Font-Size:0.8em;
}

..myDiv
{
border-width:1px;
border-style:solid;
border-color: black;
position:absolute;
left:100px;
right:10px;
top: 50px;
height:500px;
background-color:palegreen;
}
</style>

</head>
<body>
<p>I want the div to position accordng to the left and right settings
in the style. It works
fine for Firefox, however, in IE only works when there is more than
"one lines" worth
of text in there. I need it to fill the screen when there is no text.
</p>
<p>Any ideas?</p>
<div class="myDiv">
<p>Sample text inside div</p>
<table cols=1 width=100% border=0>
<tr></tr>
</table>
</div>

</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Positioning CSS components 1
Interfering CSS 1
Stuck with html and css 25
Working on mobile css menu with plenty of frustration! 2
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Trouble with css 4
Help with Visual Lightbox: Scripts 2
Need help , Having problem with Drag n Drop... 1

Members online

Total: 61 (members: 1, guests: 60)
Robots: 244

Forum statistics

Threads
473,995
Messages
2,570,228
Members
46,817
Latest member
AdalbertoT

Latest Threads

Top