• 0

CSS Height problem...

Asked by dsnhouse,

 Share Followers 0

Question

dsnhouse
Posted

Hello all

http://66.110.170.155/test_res/

I have a big problem with CSS. If you go to the page i linked above. you will see that there is an ugly scroll bar. (That should not be there btw. as if you look at the source, all my heights are set as 100%).

As far as my CSS knowledge, a height of 100% means 100% of the height of the ACTUAL element, right ?

The current HTML i use is XHTML 1.0. But when i try it in another HTML language (HTML 4.01 for example). It all looks fine. Is anybody know a work around to fix that problem, and keeping the page in XHTML 1.0 coding ?

Note : the borders of the table need to be stretching at the very edges of the window. no matter what is the resolutions used.

Any help on that could be greatly appreciated.

Best Regards.

Link to post
Share on other sites

5 answers to this question

Recommended Posts

  • 0
gregor
Posted

um...

your page is down. paste us the code inhere (help with 

<pre>code</pre>

tags)

did you check the css reference ?

Link to post
Share on other sites
  • 0
dsnhouse
  • Author
Posted 

<pre>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>Test Height</title>

</head>



<body style="margin: auto; height: 100%;">



<table border="0" style="margin: auto; height: 100%; width: 100%;" cellpadding="0" cellspacing="0">

 <tr>

  <td style="background-color: #003399; height: 9px; width: 3px;"></td>

  <td style="background-image: url(tlc.gif); background-repeat: no-repeat; height: 9px; width: 5px;"></td>

  <td style="background-image: url(tc.gif); background-repeat: repeat-x; height: 9px; width: auto; font-size: 0px;"> </td>

  <td style="background-image: url(trc.gif); background-repeat: no-repeat; height: 9px; width: 5px;"></td>

  <td style="background-color: #003399; height: 9px; width: 3px;"></td>

 </tr>

 <tr>

  <td style="background-color: #003399; height: 100%; width: 3px;"></td>

  <td style="height: 100%; width: auto;" colspan="3"> </td>

  <td style="background-color: #003399; height: 100%; width: 3px;"></td>

 </tr>

 <tr>

  <td style="background-color: #003399; height: 9px; width: 3px;"></td>

  <td style="background-image: url(blc.gif); background-repeat: no-repeat; height: 9px; width: 5px;"></td>

  <td style="background-image: url(bc.gif); background-repeat: repeat-x; height: 9px; width: auto; font-size: 0px;"> </td>

  <td style="background-image: url(brc.gif); background-repeat: no-repeat; height: 9px; width: 5px;"></td>

  <td style="background-color: #003399; height: 9px; width: 3px;"></td>

 </tr>



</table>



</body>

</html>

</pre>

that'S my code (sorry if it produce scroll bars for you users)

I'm trying to ahve the table go 100% wide (that's ok) and 100% height (that's the problem, as it makes a scroll bar).

I did checked the CSS reference as well, accoring to them, the css i use is valid. BUT. it does not work as it's intended to work.

Link to post
Share on other sites
  • 0
L3onheart
Posted

I hate when i stomp with problems like that. Sorry but it has made me stomped as well, I can't quite define the source of the problem...

Link to post
Share on other sites
  • 0
dsnhouse
  • Author
Posted

While waiting for replies i did tried some stuff. When being in XHTML it makes the problem, but as soon as i use something else than XHTML (let's say,,, HTML 4.01) it works just fine.

My guess is that's somewhat related to how the browsers are implementing XHTML (notably IE 6.0). But i can't seem to find a soluce to that.

Link to post
Share on other sites
  • 0
eangulus
Posted

From some reading on MSDN I think it has something to do with the way the canvas is rendered when using the xhtml Docutype.

Not sure how to fix this thou without removing the docutype.

Link to post
Share on other sites
This topic is now closed to further replies.
 Share
Followers 0
Go to question listing

  • Recently Browsing   0 members

    No registered users viewing this page.