Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > cross-browser right sidebar

Reply
Thread Tools

cross-browser right sidebar

 
 
David Schwartz
Guest
Posts: n/a
 
      06-20-2008
I'm trying to create a sidebar of fixed width. The following code
works in IE7 but not FF2. What's the best approach to do this in both
of these browsers?

<html>
<head>
<style>
#right {
float: right;
background-color: Silver;
height: 300px;
width: 100px;
margin-left: 50;
}

#left-1 {
background-color: Lime;
height: 100px;
margin-right: 30;
}

#left-2 {
background-color: Yellow;
height: 100px;
margin-right: 160;
}
</style>
</head>
<body>
<div id="right">blah<br />blah<br />blah<br /></div>
<div id="left-1">blah</div>
<div id="left-2">blah</div>
</body>
</html>

TIA,
David
 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      06-20-2008
David Schwartz wrote:
> I'm trying to create a sidebar of fixed width. The following code
> works in IE7 but not FF2. What's the best approach to do this in both
> of these browsers?


Better to have a URL...

Not doctype so IE will be in quirks mode, all bets on constant rendering
across browsers is off.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

>
> <html>
> <head>
> <style>
> #right {
> float: right;
> background-color: Silver;
> height: 300px;
> width: 100px;
> margin-left: 50;

^^
50 what, bananas?
> }
>
> #left-1 {
> background-color: Lime;
> height: 100px;
> margin-right: 30;

^^
again 30 what?
> }
>
> #left-2 {
> background-color: Yellow;
> height: 100px;
> margin-right: 160;

^^^
> }
> </style>
> </head>
> <body>
> <div id="right">blah<br />blah<br />blah<br /></div>

^^^^
This *XHTML*? If so you are asking for more problems with MSIE...

> <div id="left-1">blah</div>
> <div id="left-2">blah</div>
> </body>
> </html>
>
> TIA,
> David



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
 
David Schwartz
Guest
Posts: n/a
 
      06-20-2008

> Not doctype so IE will be in quirks mode, all bets on constant rendering
> across browsers is off.
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">


Good point!


> 50 what, bananas?> }


Another good point. This helped a lot, not surprisingly. However, the
margin is relative to the side of the window rather than the 'right'
div. How do I get the left divs to be sensitive to the position of the
right div? FYI, there will be additional left divs below the right div
and I'll need them to extend to the page width (minus the same
margin).

TIA,
David
 
Reply With Quote
 
David Schwartz
Guest
Posts: n/a
 
      06-20-2008
> Make them (the left divs) overflow: auto (or hidden) so they become
> block formatting contexts.


I used 'overflow: auto' for the left divs and it's looking
great in FF but not in IE7 in which the right div isn't floating at
all but, rather, pushing the left divs down the page. Any ideas why
that might be?

Thanks for your help!!

David



 
Reply With Quote
 
David Schwartz
Guest
Posts: n/a
 
      06-21-2008
On Jun 21, 3:00 am, Ben C <(E-Mail Removed)> wrote:
> On 2008-06-20, David Schwartz <(E-Mail Removed)> wrote:
>
> >> Make them (the left divs) overflow: auto (or hidden) so they become
> >> block formatting contexts.

>
> > I used 'overflow: auto' for the left divs and it's looking
> > great in FF but not in IE7 in which the right div isn't floating at
> > all but, rather, pushing the left divs down the page. Any ideas why
> > that might be?

>
> Interesting. The spec _does_ say browsers can do that if they want, but
> I didn't think IE did.
>
> But I don't know much about IE.
>
> CSS 2.1 9.4.1:
>
> In a block formatting context, each box's left outer edge touches the
> left edge of the containing block (for right-to-left formatting, right
> edges touch). This is true even in the presence of floats (although a
> box's line boxes may shrink due to the floats), unless the box
> establishes a new block formatting context (in which case the box
> itself _may_ become narrower due to the floats).
>
> CSS 2.1 9.5:
>
> The margin box of a table, a block-level replaced element, or an
> element in the normal flow that establishes a new block formatting
> context [p. 126] (such as an element with 'overflow' other than
> 'visible') must not overlap any floats in the same block formatting
> context as the element itself. If necessary, implementations should
> clear the said element by placing it below any preceding floats, but
> may place it adjacent to such floats if there is sufficient space.


So, anyone have a solution? I can't imagine I'm the first person to
raise this issue, am I?

David
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      06-22-2008
In article
<(E-Mail Removed)>,
David Schwartz <(E-Mail Removed)> wrote:

> > Not doctype so IE will be in quirks mode, all bets on constant rendering
> > across browsers is off.
> >
> > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
> > "http://www.w3.org/TR/html4/strict.dtd">

>
> Good point!
>
>
> > 50 what, bananas?>
> > }

>
> Another good point. This helped a lot, not surprisingly. However, the
> margin is relative to the side of the window rather than the 'right'
> div. How do I get the left divs to be sensitive to the position of the
> right div? FYI, there will be additional left divs below the right div
> and I'll need them to extend to the page width (minus the same
> margin).
>


Since you know the exact width of the right div, 100px, it is right
there in your CSS, just simply add 100px to the right margin of the
yellow div you want pushed away from the right div. Or is there some
complexity I am missing? Are you really not meaning to have a width on
the right float and wanting to know how to cope in that situation?

--
dorayme
 
Reply With Quote
 
David Schwartz
Guest
Posts: n/a
 
      06-23-2008

> Hey, dude, it looks exactly the same to me by adding a strict doctype:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
>
> ...which should be the first/top line of the doc.


Doesn't work for me.

David
 
Reply With Quote
 
David Schwartz
Guest
Posts: n/a
 
      06-23-2008
> Since you know the exact width of the right div, 100px, it is right
> there in your CSS, just simply add 100px to the right margin of the
> yellow div you want pushed away from the right div. Or is there some
> complexity I am missing? Are you really not meaning to have a width on
> the right float and wanting to know how to cope in that situation?


The right div is fixed width but, in the actual application, it's of
arbitrary height (data driven) and there are a number of left divs,
most of which will be positioned below the right div and should go to
the window edge (minus the margin, of course).

David

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      06-23-2008
David Schwartz wrote:
>> Hey, dude, it looks exactly the same to me by adding a strict doctype:
>>
>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
>> "http://www.w3.org/TR/html4/strict.dtd">
>>
>> ...which should be the first/top line of the doc.

>
> Doesn't work for me.


It is not the *only* thing you need to do, it is not a magic bullet, the
rest of markup has to be correct...time for a URL...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
David Schwartz
Guest
Posts: n/a
 
      06-23-2008
On Jun 23, 1:56 pm, Neredbojias <me@http://www.neredbojias.net/_eml/
fliam.php> wrote:
> On 23 Jun 2008, David Schwartz <(E-Mail Removed)> wrote:
>
>
>
> >> Hey, dude, it looks exactly the same to me by adding a strict doctype:

>
> >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> >> "http://www.w3.org/TR/html4/strict.dtd">

>
> >> ...which should be the first/top line of the doc.

>
> > Doesn't work for me.

>
> > David

>
> That's weird. I copied your code from the post, pasted it as-is in a doc
> file with .html extension, and simply added the doctype on top. It worked.
> Perhaps your version of ff is to blame. I was using ff 2.0.0.14. If that
> isn't it, I don't know what is.
>
> --
> Neredbojiashttp://www.neredbojias.net/
> Great sights and sounds


Sorry for not being clear; it's IE7 that's the problem.

I'm afraid that I don't have access to a freely available web server
to post the page to.

David
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Extension for sidebar Instant Messenger? Jaxim Firefox 0 10-22-2004 11:15 PM
Search sidebar in Firefox? Pat Firefox 2 09-08-2004 02:54 AM
Add AltaVist to Sidebar? prizm Firefox 1 07-25-2004 03:02 AM
Sidebar Dick Firefox 1 01-09-2004 08:24 PM
Mozilla Mail Folders Sidebar Question Ray Firefox 1 10-28-2003 03:08 AM



Advertisments