Member Avatar for suavedesign

Hi,
The link to my site is www.trecall.com.

On the right side of the site, there is a lot of extra white space.

Can anyone tell me why and how I can get rid of it?

Thank you!

  • 3 Contributors
  • 6 Replies
  • 589 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by suavedesign

Dani AI

Generated

A quick summary and practical next steps based on the thread: asked the right clarifying question early on; correctly identified that fixed pixel columns were causing overflow and suggested fluid widths, and confirmed switching widths to percent reduced the right-hand gap. The remaining symptom — the menu centering in Firefox but sticking left in Internet Explorer — is a different, common cross-browser issue.

Why IE behaves differently (high level): margin:auto only centers block elements that have an explicit width and are not floated. text-align:center works only for inline or inline-block children; floated elements ignore it. Older IE versions also treat inline-block poorly on elements that are naturally block-level unless their “hasLayout” is triggered (hence inconsistent results between Firefox and IE). A missing or old DOCTYPE can force quirks mode and make centering unpredictable.

Actionable checklist to resolve the menu centering:

  • Confirm a standards DOCTYPE so IE is in standards mode.
  • Inspect the menu in IE’s Developer Tools (F12) and look for floated children or any computed width wider than the wrapper (those cause left alignment or overflow).
  • Reset the UL default margin/padding and remove any floats from the element that should be centered.
  • Prefer a shrink-wrapping approach: let the menu be inline-inline-block inside a full-width wrapper with text-align:center, or give the menu a fixed width and center it with margin:0 auto (but only when the element is not floated).
  • Avoid using overflow-x:hidden as a permanent fix — it masks the real cause.

Minimal cross-browser pattern (example):

/* wrapper is full-width and centers inline content */
.menu-wrap { text-align: center; }

/* make the menu shrink-wrap so it can be centered */
.menu-wrap ul { display: inline-block; margin: 0; padding: 0; vertical-align: top; }

/* IE6/7 fallback to emulate inline-block */
.menu-wrap ul { *display: inline; zoom: 1; }

Finally, add temporary outlines/background colors to suspected elements to reveal which element is extending past the viewport — that usually points directly to the culprit.

Recommended Answers

All 6 Replies

Member Avatar for Member #842639

What do you mean by white space? Do you mean between the top of the page and the navbar? or the side and the navbar?

Member Avatar for almostbob 
.col1, .col2, .col3, .cols { float:left;}

.col1{ width:404px;}
.col2{ width:230px;}
.cols{ width:177px;}
.main {	width: /*1280px;*/2000; /*border:4px solid yellow;*/}

best practice for css dimensions is ems and %, dimensions that auto adjust to screen size and window size, fixed dimensions, the px used in the stylesheets attached to trecall cause screensizes or window sizes other than that used to develop the site to display unexpectedly
the display is exactly as instructed, but the site author did not examine the effect of the css instructions
redo the css dimensions to add to a total of 100%, and the site will work in all screen and window sizes
users will follow the page down forever, but will not scroll sideways, mice dont have sideways wheels

Edited by almostbob because: n/a
Member Avatar for suavedesign

almostbob,
what exactly should I change to percent? All widths?
Thanks

Member Avatar for suavedesign

Hi,
I changed all the widths in my css (tedious job!) from px to percent, and it definitely helped. Thank you.
Now, how can I center the menu, so that there is an equal amount of gray backgound on both sides of the menu? If I add margin-left, it will only be centered on my screen. I tried margin: 0 auto, and that does not work.
Thanks again for your time!

Edited by suavedesign because: n/a
Member Avatar for almostbob

havent looked at your menuy css, but my menu is unordered lists with css hover effects, the standard css menu (from thanks guys blatant plug I am not affiliated with cssmenu in any way)

<style type='text/css'>//partial code sample
.menu { width:100%; text-align:center; } //the outer container is set to occupy the whole window width and texst-align works on all elements within
.menu ul { // bla bla bla the menu items are styled for drop down effects
</style>
<div class='menu'>
<ul><li>Menu 1</li><li>Menu1.1></li><li>menu1.2</li><li>menu1.3></ul>
<ul><li>Menu 2</li><li>Menu2.1></li><li>menu2.2</li><li>menu2.3></ul>
<ul><li>Menu 3</li><li>Menu3.1></li><li>menu3.2</li><li>menu3.3></ul></div>
Edited by almostbob because: n/a
Member Avatar for suavedesign

okay, this is good for firefox. Thank you!
But IE totally does not read this AT ALL!
The menu just sticks in the same place- the left side of the browser- no matter what!
Any idea why? (Maybe take a look at my code to see what I may have done wrong...)
Thanks a lot!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.