Fixing the Width of a Table (despite the size of the window)

[Coxylaad]

Hi I am trying to fix the siz of a span (or a table would do).

The problem I have is that when i reduce the size of the explorer window the span (or table) width reduces to fit. I dont want this to happen, is there any way in style sheets that I can stop this happening?

Thanks

Ian

 

[cLFlaVA]

Yeah. You most certainly have the width of your [tt]<span>[/tt] or [tt]<table>[/tt] set with a relative width (%). What you want is an absolute width(pixels, em, inches, etc.).

Just do saomething like this:

<table ... style="width: 600px;">

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[Coxylaad]

nope I have set the widths to be fixed, and it does fix them, the problem I have is that when the actual width of the window becomes less than the width of the table / span the contents of the table / span start wrapping them selves round in an attempt to remain visable - totally cocking up my site.

What I am after is for the table / span to stay at the set width even though its protruding off the end of the screen.

Is this possible? well it must be cos I have seen a million sites like this, I just dont know how to stop it

 

[cLFlaVA]

I'm not sure I understand. The table stays set, but the stuff inside it wraps? Then it's because the stuff inside it is relatively sized. That's the only way it can happen.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[TheConeHead]

that is odd... do you have something that is disabling horizontal scrolling? Not sure about a span, but there is no reason why a table would force itself to a window... hmmm...

 

[CMD83]

maybe this is usefull:

http://www.quirksmode.org/css/centering.html

 

[Foamcow]

I had what sounds like a similar thing yesterday with 2 divs sitting side by side on a page.

In IE when the window width was closed up the right div dropped down under the left div.

I fixed it by putting the 2 divs into a wrapper div. They then sat where they were supposed to.

Not sure if that's quite the same as your problem though.

http://www.foamcow.com

"I'm making time

 

[Coxylaad]

thats exactly the problem foamcow (?)

I have a span with a menu on the left, as soon as the window is not big enough to hold the second span (or table) it jumps undernieth it.

I am trying to fix it now

Thanks Chaps (and chappesses)

 

[cLFlaVA]

Well, a span is an inline element. Try replacing the span with a div.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[Coxylaad]

lol just read why its FoamCow LOL

 

[Coxylaad]

excuse my ignorance but how do you place 2 divs side by side?
I used spans for this reason, I always thought divs went undernieth the preceeding text?

 

[cLFlaVA]

Here's an example:

<div style="width: 600px;">
<div style="width: 200px; float: left; clear: none;">
inside div inside div inside div inside div inside div inside div inside div inside div inside div
</div>
main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div
</div>

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[Vragabond]

Coxylaad, could you give us some code or even better a link to the site? Or it least give us more info on what exactly you're doing. If you set a width for two spans you use one after another without transforming them to block elements (floating them) you are doing something wrong. <span> as an inline element cannot have width defined and that attribute will be ignored by all standards-compliant browsers.

If you have transformed them to block level elements, then this is ok, but you could have accomplished the same with divs. Floated elements will fall one beneath the other if the container holding them is not wide enough to hold them both. Make sure your container has a fixed width and you should be ok.

More information from you will however help us help you better.

 

[Coxylaad]

ok then have a look at
this:

http://www.tubesupplyinternational.co.uk

reduce the width of the window and watch what happens

 

[Coxylaad]

here is my style sheet also:

body
{
font-family: tahoma;
font-size: 10pt;
background: #E7E7E7;
padding: 0px 0px 0px 0px;
}

img.RightImage
{
padding: 0px 0px 0px 0px;
border-bottom: solid 1px #000000;
border-left: solid 1px #000000;
border-right: solid 1px #000000;
}

img.banner
{
border: solid 1px #000000;
padding: 0px 0px 0px 0px;
}

img.smalllogo
{
border-bottom: solid 1px #000000;
border-left: solid 1px #000000;
border-right:solid 1px #000000;
}

span.Menu
{
width: 152px;
font-size:8pt;
vertical-align: top;
padding: 0px 0px 0px 0px;
}

span.Titles
{
background-color: #215A94;
color: white;
font-size:larger;
font-family: arial;
font-weight: 700;
width:100%;
padding-left: 3px;
border: solid 1px #000000;
}

span.mainbody
{
width: 621px;
padding: 0px 0px 0px 0px;
text-align: justify;
vertical-align:top
}

span.textbody
{
width: 498px;
text-align: justify;
padding: 0px 8px 0px 8px;
vertical-align:top
}


div.MenuItem
{
font-family:Arial;
font-weight:normal;
width: 152px;
text-align: center;
line-height: 25px;
border-bottom: solid 1px #000000;
border-right: solid 1px #000000;
}

div.BottomMenuItem
{
font-family:Arial;
font-weight:normal;
width: 152px;
text-align: center;
line-height: 25px;
border-bottom: solid 1px #000000;
border-right: solid 1px #000000;
}

div.MenuItem a:link, div.MenuItem a:visited, div.MenuItem a:active
{
color:#EEEEEE;
background-color:#215A94;
text-decoration:none;
width: 100%;
}

div.BottomMenuItem a:link, div.BottomMenuItem a:visited, div.BottomMenuItem a:active
{
color:#EEEEEE;
background-color:#215A94;
text-decoration:none;
width: 100%;
}

div.MenuItem a:hover
{
color:#EEEEEE;
background-color:#2A7BC6;
}

div.BottomMenuItem a:hover
{
color:#EEEEEE;
background-color:#2A7BC6;
}


div.Footer
{
width: 770px;
text-align: center;
font-size: 8pt;
padding: 3px 0px 0px 0px;
}

div.textbody
{
width: 619px;
padding: 0px 8px 0px 8px;
margin-left: 5px;
}

Table.TableBody
{
width: 619px;
font-family: Tahoma;
font-size: 10px;
}

table.specs, tbody.specs
{
width: 100%;
border: solid 1px #000000;
padding: 1px 2px 1px 2px;
font-family: Tahoma;
font-size: 10pt;
border-collapse: collapse;
padding: 2px 2px 2px 2px;
}

td
{
border: solid 1px #000000;
padding: 1px 2px 1px 2px;
border-collapse: collapse;
}

table.maintable
{
width: 770px;
padding: 0px 0px 0px 0px;
border-collapse: collapse;
}

 

[Vragabond]

Friend, your site completely breaks up in Mozilla. I saw many of the errors and did not know where to begin to correct them so I just put a temp version of your site that works the way you want and looks the same in Mozilla and IE. Hope it will be of some help:

Tube Supply

 

[Kendel]

You can add "nowrap" in every <td>; ie, <td nowrap>

This way, the content of the table will not be wrapped to the next line.

 

[Coxylaad]

Thanks Vragabond I will have a look at that.

Its seems spans are out and divs are in then.

 

[Coxylaad]

one question:


div#Wrapper {
width: 772px;
}

is this a typo or does it mean something? should that hash be a dot?

 

[Foamcow]

It's a hash.
It sets the ID of the element rather than a class.

An element ID must be unique on a page and allows you to identify that element in CSS or DOM scripting.#

A class can apply to many elements on a page and allows you to apply sets of CSS rules to an element.

http://www.foamcow.com

"I'm making time