geod100
asked on
CSS floating sidebar -- Mozilla/IE problem, urgent
Okay, here's the bottom line:
For some upcoming projects, I need to figure out how to wrap text around sidebars (sidebars might contain swfs, text, or images, but that's not relevant).
In a nutshell, here's what I've got going:
1. A position:absolute; DIV as the "wrapper," within which the main text happens;
2. A sidebar, with position:relative; nested within the main DIV
3. clear:both, for good measure
Here's what happens: in IE, the sidebar DIV DOES show up and the text in the main DIV does wrap around it. That's great. However, actual vertical positioning on the page is off (does not work at all with relative position). On mozilla/Firefox, a "hole" is cut out for the nested div, the text wraps...but the DIV floats out elsewhere on the page.
Here's the page to check out: http://www.highdudgeon.net/index.html
Here's the "wrapper"
#left
{
position:absolute;
float:left;
top: 75px;
left: 0px;
width: 240px;
height: 500px;
padding-left:5px;
padding-right:5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
font-color: #000;
background-color:#E9E8E8;
border-style:solid;
border-right-width:2px;
border-top-width:0px;
border-left-width:0px;
border-right-color:#666;
border-bottom-width:2px;
border-bottom-color:#666;
}
And the "sidebar"
#insettext
{
position:relative;
float:right;
margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;
text-align:left;
top:250px;
left:125px;
height:125px;
width:100px;
background-color:#FFF;
border-style:solid;
border-right-width:1px;
border-top-width:1px;
border-left-width:1px;
border-bottom-width:1px;
padding-left:5px;
padding-right:5px;
padding-bottom:0px;
overflow:hidden;
}
But check out the site in those browsers. Also, note that the top and bottom margines, in IE, are quite exaggerated. Help!
For some upcoming projects, I need to figure out how to wrap text around sidebars (sidebars might contain swfs, text, or images, but that's not relevant).
In a nutshell, here's what I've got going:
1. A position:absolute; DIV as the "wrapper," within which the main text happens;
2. A sidebar, with position:relative; nested within the main DIV
3. clear:both, for good measure
Here's what happens: in IE, the sidebar DIV DOES show up and the text in the main DIV does wrap around it. That's great. However, actual vertical positioning on the page is off (does not work at all with relative position). On mozilla/Firefox, a "hole" is cut out for the nested div, the text wraps...but the DIV floats out elsewhere on the page.
Here's the page to check out: http://www.highdudgeon.net/index.html
Here's the "wrapper"
#left
{
position:absolute;
float:left;
top: 75px;
left: 0px;
width: 240px;
height: 500px;
padding-left:5px;
padding-right:5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
font-color: #000;
background-color:#E9E8E8;
border-style:solid;
border-right-width:2px;
border-top-width:0px;
border-left-width:0px;
border-right-color:#666;
border-bottom-width:2px;
border-bottom-color:#666;
}
And the "sidebar"
#insettext
{
position:relative;
float:right;
margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;
text-align:left;
top:250px;
left:125px;
height:125px;
width:100px;
background-color:#FFF;
border-style:solid;
border-right-width:1px;
border-top-width:1px;
border-left-width:1px;
border-bottom-width:1px;
padding-left:5px;
padding-right:5px;
padding-bottom:0px;
overflow:hidden;
}
But check out the site in those browsers. Also, note that the top and bottom margines, in IE, are quite exaggerated. Help!
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Whoops -- my bad, I changed the wrong div name.
Okay, it does work, so we're much closer now -- thank you! The issue remains, however, that I do need to specify an absolute vertical position for this thing (in short, I need a top:Xpx;).
Your method works, but it requires setting the sidebar in the actual text for placement -- which is far from precise and not really elegant.
Thoughts? And, thanks for your help. And, yes, I remember my COBOL!
Okay, it does work, so we're much closer now -- thank you! The issue remains, however, that I do need to specify an absolute vertical position for this thing (in short, I need a top:Xpx;).
Your method works, but it requires setting the sidebar in the actual text for placement -- which is far from precise and not really elegant.
Thoughts? And, thanks for your help. And, yes, I remember my COBOL!
> geod100
Sorry I haven't had time to review your code.
Although I think it is important to say that Abolute positioned elements usually cause problems somewhere.
I can't really think of anything except popup divs, where you would need Absolute positioning.
Why doesn't it work with relative positioning?
Whenever I float something and want text to wrap around it, I do this:(inline coding just to make it simple for me to type up)
<div style="clear: both; padding: 10px;">
<div style="float: left; width: 200px; margin: 10px 10px 5px 15px;">
SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR
SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR
SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR
SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR
</div>
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
</div>
Sorry I haven't had time to review your code.
Although I think it is important to say that Abolute positioned elements usually cause problems somewhere.
I can't really think of anything except popup divs, where you would need Absolute positioning.
Why doesn't it work with relative positioning?
Whenever I float something and want text to wrap around it, I do this:(inline coding just to make it simple for me to type up)
<div style="clear: both; padding: 10px;">
<div style="float: left; width: 200px; margin: 10px 10px 5px 15px;">
SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR
SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR
SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR
SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR
</div>
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
>>>I need to specify the precise vertical location on the page.
>>>which is far from precise and not really elegant.
Are you doing a magazine page or a web page. If you want more precision then do what the old time typesetters did. Position each word precisly where you want it. If somethig is not quite right adjust the point sizes fractionaly; modify the kerning, and customize the font. Then inssist that every user of the page only be allowed to view the page with the specific browser, OS, resolution, screen size and preference settings. Then if there is not more a a 3% variance in the voltage to their computer they will see "precisely" what you want them to see.
Of course you always have the option to use a graphic for the whole thing.
Do you not understand that the only users who are going to see it the way you do are those with an identical setup? Some users are going to use larger fonts; some smaller? Control of a web page by the developer is an illusion. The user has control all you can do it give the browser a good set of instructions that allows it to do an acceptable presentation no matter what the user does to screw it up.
Cd&
>>>which is far from precise and not really elegant.
Are you doing a magazine page or a web page. If you want more precision then do what the old time typesetters did. Position each word precisly where you want it. If somethig is not quite right adjust the point sizes fractionaly; modify the kerning, and customize the font. Then inssist that every user of the page only be allowed to view the page with the specific browser, OS, resolution, screen size and preference settings. Then if there is not more a a 3% variance in the voltage to their computer they will see "precisely" what you want them to see.
Of course you always have the option to use a graphic for the whole thing.
Do you not understand that the only users who are going to see it the way you do are those with an identical setup? Some users are going to use larger fonts; some smaller? Control of a web page by the developer is an illusion. The user has control all you can do it give the browser a good set of instructions that allows it to do an acceptable presentation no matter what the user does to screw it up.
Cd&
Glad we could help. Thanks for the A. :^)
Cd&
Cd&
ASKER
Well...I'm not sure whether or not the above was sarcasm. Of course I understand that control over a web page isn't precise. But, within a great amount of reason, it's possible to get things to look right. All I wanted to do was to position a side bar with a vertical positioning specification. Hell, one easy way to do that is simply to use DIVs for each piece -- side bar, top, bottom and sides. I was just looking for a more elegant way of getting it done, rather than using a text insertion and very, very loose guesstimate.
You pointed out, above, that absolute placement and the float were clashing -- had I bothered to think things through for a bit longer, based on my experiments, that would have been obvious.
Having said that, whatever flaws this little personal project might have, I have managed large-scale print and, yes, web development projects that ran into the hundreds of thousands of dollars. Mind you, as a manager -- not as a direct developer. Oh, and before that, I managed print production for years, so I do know a thing or two about that field.
You pointed out, above, that absolute placement and the float were clashing -- had I bothered to think things through for a bit longer, based on my experiments, that would have been obvious.
Having said that, whatever flaws this little personal project might have, I have managed large-scale print and, yes, web development projects that ran into the hundreds of thousands of dollars. Mind you, as a manager -- not as a direct developer. Oh, and before that, I managed print production for years, so I do know a thing or two about that field.
It was not sarcasm. Every week in these topics we get developer going over the edge because they are not getting pixel exact placement or they are upset because a user chnge the font size to 125% and messed up the layout they has spent weeks get absolutley perfectly positioned.
More than half the members who come to the CSS topic do not have a good understanding of it or how to use it; many are still mired in 20th century layout methods. We like to think that everyone leaves a little more knoledgable about CSS. Both Sean and I spend a great deal of time teaching well beyond what is required to answer questions.
So if you took it as sarcasm, and wer offended, I sincerly appologize. I look a profiles and try and communicate at a level suited to the members skill set, and background. You have nothing in your profile so I could only go by the content of the thread, and you came across to me as an earnest you developer learning on the fly and trying to impress your boss. Sorry if that resulted in me appearing to talk down to you.
Cd&
More than half the members who come to the CSS topic do not have a good understanding of it or how to use it; many are still mired in 20th century layout methods. We like to think that everyone leaves a little more knoledgable about CSS. Both Sean and I spend a great deal of time teaching well beyond what is required to answer questions.
So if you took it as sarcasm, and wer offended, I sincerly appologize. I look a profiles and try and communicate at a level suited to the members skill set, and background. You have nothing in your profile so I could only go by the content of the thread, and you came across to me as an earnest you developer learning on the fly and trying to impress your boss. Sorry if that resulted in me appearing to talk down to you.
Cd&
ASKER
No problems, and thanks -- too easy to get irritated over email. I really appreciate your help -- and, yes, I am somewhat mired in old ways.
Just got back from a busy weekend...
Sorry Cd& - my comment was just backing up your initial post, I hadn't meant to take points for it :-(
geod100, thanks very much for your reply's. Good two-way communication is what makes us enjoy what we do here.
Sean
Sorry Cd& - my comment was just backing up your initial post, I hadn't meant to take points for it :-(
geod100, thanks very much for your reply's. Good two-way communication is what makes us enjoy what we do here.
Sean
Sean, NP. It evens out over time. Won't matter until they start taking EE points at the Beer Store; then it gets important. ;^)
Cd&
Cd&
ASKER
Hey, I worked at the Evil Empire, AKA Microsoft, for years (as a writer and manager)-- I know all about miscommunication and feel terrible for having misinterprested CD's.
You guys rock.
You guys rock.
ASKER
Having said that, the above does not fix the Mozilla problem -- absolutely no change.