HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


[SOLVED] Fixed width issues

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#48412 (In Topic #10580)
Avatar

Community saint

IE Sucks!!

Hey OCPer's!

I'm using the fixed width guidance from the OCP tutorial, but I'm having an issue with IE…*sigh*

Here is my CSS:

Code

#main_website #body_inner {
   width: 960px !important;
   width: 90%;
   position: absolute;
/*   margin: 0 60px 0 auto;*/
   background: white;
   margin-top:30px;
   margin-bottom:10px;
   margin-left: 60px;
}
The problem is with the 960px. I added the !important hoping Firefox would grab that one and IE would go with the 90%, but to no avail. Anything other than a % (which I really don't want to use) and anything higher than 90% produces scroll bars as if the #body_inner were an iframe or embedded frame. Any thoughts? (Opera, Safari, Firefox all good with the 960px. I hate IE….) I also tried shrinking #panel_bottom thinking it was forcing things too wide, but no change there either.


"no violence, no hate, no pain, no enemies
just peace, unity, tolerance and love" - The Beloved

OCP V7 | Advocating monetary reform - FreeOurMoney

Need OCP friendly hosting? Look no further:
Web Hosting, Reseller Hosting, and Dedicated Servers w/cPanel - Elief! - Official hosting partner for ocPortal.
Back to the top
 
Posted
Rating:
#48413
Avatar

Hi,

I'm not sure exactly what you're aiming for but I'll try and send some general advice your way…

1)

The width an element will actually take is equal to it's defined width plus it's left margin plus it's right margin plus it's left padding plus it's right padding plus it's left border width plus it's right border width.
i.e.
realWidth = width + padding + margin + border

That's a common point of confusion, and could be part of the problem here. If 60px>(100%-90%) then the realWidth>100%, hence scrollbars.

The solution to this weird CSS behavior is to use two elements. Put the margin on the outer one, and the width on the inner one. Or if it's padding you want, put the padding on the inner one and the width on the outer one.

2)

Sometimes overflow: hidden is good to get rid of scrollbars, but using it here might result in content being cut-off.

3)

margin: 0 auto is for CSS centering. Something like margin: 0 60px 0 auto; probably is like a right-alignment, not sure if that was what you're intending.

4)

There's no need for IE hacks. If you want something just for IE, put it in no_cache.css. The first line in that file is a good example of something targeted just to IE…

Code

{$BROWSER,ie,.standardbox_classic \{ overflow-x: hidden; \} }


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#48415
Avatar

Community saint

Thanks Chris, general advice is my favourite as it invariably leads to multiple questions being answered instead of just the posed query and new directions taken. I'll take a look through your points and let you know how I make out.

"no violence, no hate, no pain, no enemies
just peace, unity, tolerance and love" - The Beloved

OCP V7 | Advocating monetary reform - FreeOurMoney

Need OCP friendly hosting? Look no further:
Web Hosting, Reseller Hosting, and Dedicated Servers w/cPanel - Elief! - Official hosting partner for ocPortal.
Back to the top
 
Posted
Rating:
#48446
Avatar

Community saint

Grrr, this is still making me nuts….I hate IE!! And, *grin*, low and behold, it is doing the same thing here on ocportal.com. Head to:

Tutorials - ocPortal.com
and expand a tutorial. I used Visual Customization.

"no violence, no hate, no pain, no enemies
just peace, unity, tolerance and love" - The Beloved

OCP V7 | Advocating monetary reform - FreeOurMoney

Need OCP friendly hosting? Look no further:
Web Hosting, Reseller Hosting, and Dedicated Servers w/cPanel - Elief! - Official hosting partner for ocPortal.
Back to the top
 
Posted
Rating:
#48448
Avatar

Problem fixed on ocPortal.com. I wasn't aware of it here, thanks for pointing it out.

What we had here was a very specific IE bug, and that is that if you have this:

Code

<img style="float: left" ... width="100" />
<div>
   <div style="padding-left: 100px">
      test
   </div>
</div>

then "test" isn't flush to the image, which it should be (the padding-left here makes it flush all the way down, so if the text goes further than the image, it doesn't wrap underneath the image). Instead of being flush, it is an extra 100px in.

The fix is to do:

Code

<div>
   <img style="float: left" ... width="100" />
   <div style="padding-left: 100px">
      test
   </div>
</div>

or:

Code

<img style="float: left" ... width="100" />
<div style="padding-left: 100px">
   <div>
      test
   </div>
</div>


I don't know if this is the problem you're seeing, but it's very specific so likely isn't.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#48449
Avatar

SoccerDad said

Grrr, this is still making me nuts….I hate IE!! And, *grin*, low and behold, it is doing the same thing here on ocportal.com. Head to:

Tutorials - ocPortal.com
and expand a tutorial. I used Visual Customization.

If you want to save the page in IE (the way you save it with all the saved files together, in a directory), zip it, and attach it, I'll take a look.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#48478
Avatar

Community saint

Yesterday:
Hi Chris! Thanx very kindly for your offer, however, in this case, I'd feel badly having you waste your valuable time bailing me out of a mess I created.

This morning:
I noted all the clues discussed in this thread and I'm happy to report that this issue has been identified and nailed. Turned out to be a combination of a width tag from a 3rd party CSS file include and a non closed div container (missing </div>). Corrected now, and all good. Can you say needle in a haystack? ;)

Thanx for the assist!!

"no violence, no hate, no pain, no enemies
just peace, unity, tolerance and love" - The Beloved

OCP V7 | Advocating monetary reform - FreeOurMoney

Need OCP friendly hosting? Look no further:
Web Hosting, Reseller Hosting, and Dedicated Servers w/cPanel - Elief! - Official hosting partner for ocPortal.
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: