Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Problems with CSS block position and IE

Reply
Thread Tools

Problems with CSS block position and IE

 
 
news@celticbear.com
Guest
Posts: n/a
 
      10-14-2005
I'm having a heck of a time, and I'm hoping someone can take a quick
look and see if they can recognize what might be the problem and point
me the right direction.

My blog page: http://www.celticbear.com/weblog/ looks fine in Firefox
and Opera, but in IE6, the main body block positions itself below the
left menu bar.

I've W3C validated the XML Schema, HTML, and CSS and fixed a couple of
errors and all three now give me a "valid" indicator.

I've used the Developer Tools extension in Firefox to look at the block
info, and saw a redundant element I took out. Otherwise, I can't find
where the problem lies.

I've changed font, margin, padding, and width all over the stylesheet,
and can't seem to effect any improvement.

Anyway, I'm new to CSS, so I'm hoping someone can take a quick look and
know right off "Ah, you appear to have a problem with the catalytic
converter! Check that." Just a good clue, a direction, is all I need,
if possible.

Thanks for any feedback!
Liam

 
Reply With Quote
 
 
 
 
Thomas Mlynarczyk
Guest
Posts: n/a
 
      10-14-2005
Also sprach :

> My blog page: http://www.celticbear.com/weblog/ looks fine in Firefox
> and Opera, but in IE6, the main body block positions itself below the
> left menu bar.


I did a quick test with IE5.0 (the problem appears there as well). I'm not
sure what's really going on, but changing the "margin" to "padding" in
#content and #sidebar did the trick:

#content {
/* margin: 0 10px 0 0; */
padding: 0 10px 0 0;
}

#sidebar {
/* margin: 0 0 0 10px; */
padding: 0 0 0 10px;
}

Greetings,
Thomas




 
Reply With Quote
 
 
 
 
news@celticbear.com
Guest
Posts: n/a
 
      10-14-2005

Thomas Mlynarczyk wrote:
> Also sprach :
>
> > My blog page: http://www.celticbear.com/weblog/ looks fine in Firefox
> > and Opera, but in IE6, the main body block positions itself below the
> > left menu bar.

>
> I did a quick test with IE5.0 (the problem appears there as well). I'm not
> sure what's really going on, but changing the "margin" to "padding" in
> #content and #sidebar did the trick:
>
> #content {
> /* margin: 0 10px 0 0; */
> padding: 0 10px 0 0;
> }
>
> #sidebar {
> /* margin: 0 0 0 10px; */
> padding: 0 0 0 10px;
> }
>
> Greetings,
> Thomas


Thanks for the reply!
I tried making that change, and it's still broken in IE6.
But, I'd never thought of a margin/padding problem. I'll go through and
replace all of them in the whole sheet and see if that makes a
difference.
Thanks!
Liam

 
Reply With Quote
 
kchayka
Guest
Posts: n/a
 
      10-15-2005
wrote:
>
> My blog page: http://www.celticbear.com/weblog/ looks fine in Firefox


Hmmm... perhaps you should have tried zooming text up a notch or two
before coming to that conclusion. Or were you expecting a horizontal
scrollbar and some overlapping text?

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
 
Reply With Quote
 
news@celticbear.com
Guest
Posts: n/a
 
      10-15-2005

kchayka wrote:
> wrote:
> >
> > My blog page: http://www.celticbear.com/weblog/ looks fine in Firefox

>
> Hmmm... perhaps you should have tried zooming text up a notch or two
> before coming to that conclusion. Or were you expecting a horizontal
> scrollbar and some overlapping text?


Wha? I don't get what you mean.
You mean, increase the browser's view of the font size?
Uhm, I'm just talking about the "normal" or medium, standard browser
display settings. I can't imagine being able to control exactly how the
browser looks once someone starts playing with display settings on the
client side, no?
Can I?
In any case, I still can't see anything "wrong" with the CSS. Neither
can the W3C validators, so I think I'm OK with trying to make sure
normal IE view comes as close as possible to normal Firefox.

 
Reply With Quote
 
Leonard Blaisdell
Guest
Posts: n/a
 
      10-15-2005
In article <. com>,
wrote:

> kchayka wrote:
> > wrote:
> > >
> > > My blog page: http://www.celticbear.com/weblog/ looks fine in Firefox

> >
> > Hmmm... perhaps you should have tried zooming text up a notch or two
> > before coming to that conclusion. Or were you expecting a horizontal
> > scrollbar and some overlapping text?


> You mean, increase the browser's view of the font size?


Yep. People who visit your page can be uncomfortable with the font you
present and try to increase it's size. Your page should deal with that
gracefully. Your 'posted on' text creeps up into the heading everywhere
when the font size is increased. Probably a simple fix.

> Uhm, I'm just talking about the "normal" or medium, standard browser
> display settings. I can't imagine being able to control exactly how the
> browser looks once someone starts playing with display settings on the
> client side, no?


<http://www.allmyfaqs.com/faq.pl?AnySizeDesign> might help your
understanding. Don't get me wrong. It isn't awful. But there is no
normal on the web. And medium disregards everything on both sides.

> In any case, I still can't see anything "wrong" with the CSS. Neither
> can the W3C validators, so I think I'm OK with trying to make sure
> normal IE view comes as close as possible to normal Firefox.


Just make it readable to non medium people. I wouldn't worry overmuch
about it looking as close as possible in different browsers. On the
other hand, it shouldn't be green in one with the menu on the left and
red in another with the menu on top
It's really not bad, but the text is pretty small to my old eyes. I
would increase font size when visiting it. And that presents problems.

leo

--
<http://web0.greatbasin.net/~leo/>
 
Reply With Quote
 
boclair
Guest
Posts: n/a
 
      10-15-2005
wrote:

> My blog page: http://www.celticbear.com/weblog/ looks fine in Firefox
> and Opera, but in IE6, the main body block positions itself below the
> left menu bar.


IE doesn't handle boxes in the correct manner. This creates a problems
such as you see when side by side boxes are given fixed widths that can
exceed the width of the viewport.

You might consider something more fluid, for example by adapting a
layout such as that published by Lauri Raitilla at
http://www.student.oulu.fi/~laurirai...float2col.html

Louise
 
Reply With Quote
 
kchayka
Guest
Posts: n/a
 
      10-15-2005
wrote:

> kchayka wrote:
>> wrote:
>> >
>> > My blog page: http://www.celticbear.com/weblog/ looks fine in Firefox

>>
>> Hmmm... perhaps you should have tried zooming text up a notch or two

>
> You mean, increase the browser's view of the font size?
> Uhm, I'm just talking about the "normal" or medium, standard browser
> display settings.


Your "normal" and mine are not necessarily the same.

> I can't imagine being able to control exactly how the
> browser looks once someone starts playing with display settings


FYI, it's not "playing with display settings", but changing the browser
preferences to what works best for the individual user. I happen to need
a larger text size than the average person. Your page does not adjust
well to that.

> on the client side, no?
> Can I?


No, you cannot control the visitor's browser. You can, however, test
your pages in various window and text sizes and see how the layout
adapts. That is very easy to do and should be a normal part of testing.
If the layout does not adjust gracefully, then it's a design flaw.

> In any case, I still can't see anything "wrong" with the CSS. Neither
> can the W3C validators, so I think I'm OK with trying to make sure
> normal IE view comes as close as possible to normal Firefox.


Validated code only means there aren't any syntax errors that might be
the cause of rendering issues. There may still be logic errors in the
code and/or browser bugs to contend with.

In your particular case, the cause of IE's weirdness is likely its
broken overflow behavior. Contrary to specs, IE's default behavior
automatically expands an element to fit the content, regardless of any
specified dimensions. Thus, the left column is erroneously widened
(perhaps for the sitemeter), which pushes the right column down due to
insufficient horizontal space for the specified #content width. Other
browsers will simply constrain the dimensions and just let any overflow
spill out.

As for getting around IE's brokenness, you might set overflow:hidden on
the left column, but only as a last resort as it might have very
undesireable results in other browsing environments. Instead, try not
floating #content or setting its width at all. Just set margin-left to
at least the width of the left column and it should take up whatever
remaining horizontal space there is.

And here's a tip: Don't set both fixed height and width for text
elements, especially not in px units. One of those dimensions should be
left to automatically adjust as needed, to allow for varying text sizes
and line-wrapping in different places.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
 
Reply With Quote
 
news@celticbear.com
Guest
Posts: n/a
 
      10-15-2005

kchayka wrote:
> FYI, it's not "playing with display settings", but changing the browser
> preferences to what works best for the individual user. I happen to need
> a larger text size than the average person. Your page does not adjust
> well to that.
>


Fairnuff. Guess that makes sense. If there are good ways for me to make
the font increase graceful, I shall look into it. I guess I just never
really considered it before.

>
> As for getting around IE's brokenness, you might set overflow:hidden on
> the left column, but only as a last resort as it might have very
> undesireable results in other browsing environments. Instead, try not
> floating #content or setting its width at all. Just set margin-left to
> at least the width of the left column and it should take up whatever
> remaining horizontal space there is.
>
> And here's a tip: Don't set both fixed height and width for text
> elements, especially not in px units. One of those dimensions should be
> left to automatically adjust as needed, to allow for varying text sizes
> and line-wrapping in different places.
>


Thanks for the info! Unfortunately I don't have time tonight to play
and see, but by the sounds of it, this is very likely the direction I
need to go and that's what I needed.
Thanks for your time and reply!
Liam

 
Reply With Quote
 
BootNic
Guest
Posts: n/a
 
      10-15-2005
> "" <> wrote:
> news: oups.com....
>
> I'm having a heck of a time, and I'm hoping someone can take a quick
> look and see if they can recognize what might be the problem and point
> me the right direction.
>
> My blog page: http://www.celticbear.com/weblog/ looks fine in Firefox
> and Opera, but in IE6, the main body block positions itself below the
> left menu bar.
>
> I've W3C validated the XML Schema, HTML, and CSS and fixed a couple of
> errors and all three now give me a "valid" indicator.
>
> I've used the Developer Tools extension in Firefox to look at the
> block info, and saw a redundant element I took out. Otherwise, I
> can't find where the problem lies.
>
> I've changed font, margin, padding, and width all over the stylesheet,
> and can't seem to effect any improvement.
>
> Anyway, I'm new to CSS, so I'm hoping someone can take a quick look
> and know right off "Ah, you appear to have a problem with the
> catalytic converter! Check that." Just a good clue, a direction, is
> all I need, if possible.



I think you may find that your problem is in the blockquote style.
Don't set the padding on top or bottom and I think you will resolve
your current problem.

blockquote {
background: #efe4ca;
color: #4f4636;
border-left: 6px solid #7f7157;
padding-left:10px;
padding-right: 5px;
}

If you must have the padding on top or bottom of the blockquote
change them to a div and set your style to mimic the blockquote.


--
BootNic Saturday, October 15, 2005 4:10 AM

Laughter sets the spirit free to move through even the most tragic of circumstances. It helps us
shake our heads clear, get our feet back under us, restoring our sense of balance and purpose. Humor
is integral to our peace of mind and to our ability to go beyond survival.
*Captain Gerald Coffee POW in Vietnam for seven years*


 
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
[CSS]What's the meaning of these css declaration { *display:block; κл Javascript 2 01-03-2008 12:43 PM
"break" from a block and a proc object used in block position Wolfgang Ndasi-Donner Ruby 0 05-31-2007 06:05 PM
Fo:Block can you check to see if a block contains any text by using the block id? morrell XML 1 10-10-2006 07:18 PM
Where is Form Relative Position and Absolute Position in VS.Net 2005 ? Luqman ASP .Net 1 02-07-2006 10:27 AM



Advertisments
 



1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57