Help | Site Map
Connecting Tech Pros Worldwide
 
 
LinkBack Thread Tools
  #1  
Old July 21st, 2005, 12:52 AM
Lee K. Seitz
Guest
 
Posts: n/a
Default Centering div in space next to floating element

I stayed up late working on a CGI script and spent some time
formatting my page with CSS. It looked fine in IE, which will be 95%
of my audience, so I went to bed. Got up and looked at it in Opera
and it's different and not what I wanted.

Take a look at <http://home.hiwaay.net/~lkseitz/hhs/rnb/>. I'm
concerned with the form and links in the dashed box in the middle of
the page. In IE, my "margin: auto" causes the div to center itself in
the space between the left of the page and the floating image to the
right. In Opera, the div is centered over the entire window. If the
window is sized down such that the form hits the floating image,
ugliness ensues.

The IE behavior is what I desire. Most of the relevent CSS
information is in the HTML itself. (The image's class is in
<http://home.hiwaay.net/~lkseitz/hhs/hhs.css>.) Any tips on the
proper way to get it? Thanks.

(And if anyone wants to tell me the proper way to style the table at
the bottom with CSS, rather than using HTML attributes, feel free to
speak up! But that's not my primary concern at the moment.)

--
lkseitz (Lee K. Seitz) .at. hiwaay @dot@ net
Believe in the Bible? Heck! I've SEEN one!
  #2  
Old July 21st, 2005, 12:52 AM
Lauri Raittila
Guest
 
Posts: n/a
Default Re: Centering div in space next to floating element

In article <10l8cga5am3obc8@corp.supernews.com>, lkseitz@see.my.sig
says...[color=blue]
> Take a look at <http://home.hiwaay.net/~lkseitz/hhs/rnb/>. I'm
> In IE, my "margin: auto" causes the div to center itself in
> the space between the left of the page and the floating image to the
> right.[/color]

Yes, there seems to be bug on IE.
[color=blue]
> Most of the relevent CSS information is in the HTML itself.[/color]

BAD. More ugly is that your CSS is 3 places, external file (good),
embedded (OK for tests), inline (hardly ever good idea)
[color=blue]
> Any tips on the proper way to get it? Thanks.[/color]

Easiest way is to wrap blue dashed bordered div to other div, and give
that new div margin-right same size as your image.

If you don't like having elements just for styling, use padding-right for
body etc. and negative margins on other stuff. I don't recommend. You
might also try margin for current div and putting border to its child
elements, but I don't think it will work with dashed border...
[color=blue]
> (And if anyone wants to tell me the proper way to style the table at
> the bottom with CSS, rather than using HTML attributes, feel free to
> speak up! But that's not my primary concern at the moment.)[/color]

tr:first-child {background:#666;color:#000}
tr:first-child > th + th {background:yellow;clor:#000;}
table {border-collapse:collapse}
td,th {border:3px ridge;}

In IE, does not work. Should work on Firefox and Opera, if Table is
marked up correctly. Replace complicated selectors with classes, and IE
should do it too.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
  #3  
Old July 21st, 2005, 12:52 AM
Lee K. Seitz
Guest
 
Posts: n/a
Default Re: Centering div in space next to floating element

In article <MPG.1bbe716a81adb00498a01d@news.individual.net> ,
Lauri Raittila <lauri@raittila.cjb.net> wrote:[color=blue]
>Yes, there seems to be bug on IE.[/color]

And it's always a pain when the IE bug ends up being the desired look.
8)
[color=blue][color=green]
>> Most of the relevent CSS information is in the HTML itself.[/color]
>
>BAD. More ugly is that your CSS is 3 places, external file (good),
>embedded (OK for tests), inline (hardly ever good idea)[/color]

I tend to agree, but this is still a work in progress. This is also
the only place this particular style (the inlined dashed box) will be
used. The embedded styles I grabbed from another page from a
different "site" of mine. Which means I'm using it more than once and
should probably stick it in it's own stylesheet, as you say. Although
I think I changed the width, come to think of it.
[color=blue]
>Easiest way is to wrap blue dashed bordered div to other div, and give
>that new div margin-right same size as your image.[/color]

Ah, just what I needed! Thanks. For some reason I always forget
about setting margins for things like this. Which is sad because I
used that technique on one of my sites. Although I'm not sure the
double div would have occurred to me.

And let me apologize for the HTML on that page. It's generated by a
script, which means there aren't nearly as many line breaks (not to
mention as much indenting) as there should be. I hadn't thought about
that when I posted.

--
lkseitz (Lee K. Seitz) .at. hiwaay @dot@ net
BBS flashback:
* SLMR 2.1a * This tagline is umop apisdn
 

Bookmarks

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 Off
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over network members.
Post your question now . . .
It's fast and it's free

Popular Articles