|
CSS - Ie6 Inserts Unexpected Space Below Table (xhtml Transitional, Css)
I've got different CSS layout problems concerning the redesign of a website which will be dedicated to an online shop selling items for online roleplaying games.
The redesigned website is planned to be set up in valid XHTML 1.0 Transitional. Though it at first validated unter Strict, too, I've chosen this doctype because the content (main text, items etc.) is generated automatically by a content management system (CMS: OScommerce) and pasted into the XHTML template I did. This PHP generated code seems to contain presentational markup such as layout tables. For I am not allowed to change the PHP-Scripts I thought Transitional would fit the best. You can reach my original template he URL (URI of the CSS file: URL) The problem now is, while beeing viewed in IE6/Win and Mozilla Firefox, the template of mine shows no mistakes concerning these browser's rendering output. After inserting the HTML code of the CMS generated content IE6 inserts about 300 pixel space between a sample table and the rest of the content. Firefox doesn't show this behaviour. An demonstration of the final HTML containing the CMS output is available he URL (URI of the CSS file: same as above) As for a second, someone also sent me a screenshot he made while displaying the first of both sites in a newer Opera Browser. The layout wasn't displayed as I wanted it to do, too (spaces between or at the top of the graphics on the left caused the layout to break). I suppose the second website shows the same behaviour, I wasn't allowed to check it, yet. I checked out different css relating websites and tried a lot, but didn't found any resolution to these problems. Would anyone help me, please? I'd be glad about responses and/or helpful css snippets! With regards, Andreas Kwiatkowski Similar TutorialsHello, I am trying to place a layer on an XHTML transitional page that is 40 pixels from the top and 264 pixels from the left. When I have the DTD tag in place the browser ignores the top and left attributes of my style, but comment it out and it works. Here is the code snippet. Any tips? Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #layer1{ position:absolute; width:200px; height:115px; z-index:1; top: 40; left: 264; } </style> </head> <body> <div id="Layer1">content</div> </body> </html> I have an extra PHPNuke (Ravennuke 2.02) module for the start page. Several pieces of information are displayed in various cells of a table. I have a problem were there is some extra space at the beginning of a table that I cannot get rid of. I saved the output and uploaded he http://www.linux-tutorial.info/index_test3.html after the site title and before the tag line "The place where you learn Linux", there is a large space. In this example, the title is in a separate table, followed by a new table for the information blocks. If I put them in the same table the space appears before the title block. The relevant block of code looks like this: Code: <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr valign="top"> <td class="welcome_title_box" valign="top" colspan="2"> <div align="center" class="welcome_main_title"> Welcome to the <br>Linux Knowledge Base and Tutorial</div> </td></tr></table> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr><td valign="top" width="50%"> <span class="subtitle">"The place where you learn Linux"</span> <br><br> Looking for an in-depth and easy-to-understand introduction to Linux? Then look no further! <br> We don\'t just show you how to execute a handful of commands and use a few utilities. The Linux Tutorial goes beyond the basics, providing you with the knowledge necessary to get the most out of your Linux system. <br><br> Jump right in by clicking <a href="http://www.linux-tutorial.info/modules.php?name=MContent&pageid=224"> here</A>. </td> If I removed the highlighted code, the space appears before the site title. If I remove the whole DIV containing the title, I still have the space above the tag line. This says to me that it is not related to the division. It seems that this row or the table itself is pulling the formatting from somewhere else. That would be a logical consequence of the cascading aspect of CSS, but I do no see where it is gettign the space from. Admittedly I am not all that good with CSS/formatting, so it is possible (if not likely) that I overlooked something. Note that in the index_test3.html, I close the table at the end of the first row (prior to the list of news and threads) then open a new table: Code: </table><table border="0" cellpadding="0" cellspacing="0" width="100%" > If I change BGCOLOR for the first table and then change the line above to this: Code: </table>HERE<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="RED"> The space is after the word "HERE". If I remove this code, the extra space is right after the row/div with the site title and before the row with the tag-line. This all make me think that the extra space is being added before the next table, as opposed to at the end of the previous table. There are a number of posts in the CSS forum that I tried like changing the margin (style="margin: 0px"), but none of the solutions solved the problem. I have tried all sorts of combinations of spacing and alignment, but I cannot get rid of this space. I have tried loaded the page with multiple browsers (Konqueror, FIrefox, IE 6) with the same results, so I do not think it is a browser specific issue. Any and all input is greatly appreciated. In this table, the right column is displaying correct, the left column has an odd space appearing at the top. Here's the page www.scarboroughrocks.com/inthenews.htm I don't see where that space is coming from at the top of the left column. Here is the code: Code: <table width="531" border="1" cellpadding="2">
<tr>
<td width="251">
<h4 align=center>NEWS ARTICLES</h4>
<p><a href="http://www.worldnetdaily.com/news/article.asp?ARTICLE_ID=40550">"Joe Scarborough is one feisty guy"</a> - World Net Daily - 9/21/04 </p>
<p><a href="http://www.teenspeaknews.com/vol4/issue4/issues/new_age_conservatism.html">New Age Conservatism</a> - TeenSpeakNews - Vol.4, Issue4</p>
<p><a href="http://www.washingtonpost.com/ac2/wp-dyn?pagename=article&node=&contentId=A29236-2001Jul20">"Captive Parents: Scarborough shows support"</a> - Washington Post - 6/22/01</p>
<p> </p>
<h4 align=center>INTERVIEWS</h4>
<p><a href="http://www.nationalreview.com/interrogatory/scarborough200403290839.asp">"Cuppa Joe"</a> - 3/29/04- National Review Online </p>
<p> </p>
<p><a href="http://www.chuckbaldwinlive.com/real2.html">Chuck Baldwin Radio Show</a> - 5/24/97 </p></td>
<td width="260">
<h4 align=center>COLUMNS</h4>
<p><a href="http://www.jewishworldreview.com/0804/scarborough_archives.asp">Jewish World Review Archive </a> -4/03-9/04- awesome set, 150 in all</p>
<p><a href="http://www.justgivemesometruth.org">Florida Sun - "From The Pub"</a>- Must Read!! From the newspaper he created, of a more personal nature </p>
<p><a href="http://www.townhall.com/columnists/joescarborough/archive.shtml">TownHall.com</a> -5/03-7/03 - Other great columnists on this site too </p>
<p><a href="http://www.learnathome.com/506998.html?view=print">Crosswalk.com</a> - On human rights</p>
<h4 align=center>SPEECHES</h4>
<p><a href="speeches.htm#farewell">Farewell Speech to Congress</a> - 9/5/01</p>
<p><a href="speeches.htm#cuba">Human Rights in Cuba</a> - 4/24/01 </p>
<p><a href="speeches.htm#balancingbudget">Balancing the Budget</a> - 3/2/99</p>
<p><a href="speeches.htm#freeenterprise">The Power of Free Enterprise</a> - 3/5/98</p>
<p><a href="speeches.htm#castro">On the Castro Murders</a> - 2/27/96 </p>
<h4 align=center>TRANSCRIPTS</h4>
<p><a href="http://www.msnbc.msn.com/id/3719710/">"Scarborough Country" Transcripts</a> - Scroll to the bottom of that page to find transcripts from the previous week. </p>
<p>See the <a href="scarboroughcountry.htm">Show</a> page for older transcripts. </p></td>
</tr>
</table>
Thanks ya'll. I've been over this one so many times, and can't figure why it's behaving so strangely. I have a data table within my content div. It appears fine on my screen in several browsers, however, coworkers have a large (full screen) of white space where the table should be. They have to scroll down a full screen to get to the table. I have everything on the site set up using CSS. The table contains the dates, times and municipalities for Trick or Treat events. I have a vertical-align:top on the table. Here is the CSS: Code: table#halloween {
margin-left: 2px;
text-align:center; margin-right:auto; width:100%;
vertical-align:top;
font-size:12px;
padding: 3px;
width:100%;
border: solid #000000;
}
td.halloweencell {
border-color: #000;
border-style: solid;
}
Here is a sample of the HTML : Code:
<table width="100%" id="halloween" summary="Table of municipalities, date of trick or treat and times for trick or treat">
<tr>
<th width="50%" class="rowcoloryellow"><strong>MUNICIPALITY</strong></th>
<th width="20%" class="rowcoloryellow"><strong>DATE</strong></th>
<th width="30%" class="rowcoloryellow"><strong>HOURS</strong></th>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td class="halloweencell" width="50%">City of Hartford </td>
<td class="halloweencell" width="20%">October 30th </td>
<td class="halloweencell" width="30%">4:00 p.m. - 6:00 p.m. </td>
</tr>
<tr>
<td class="rowcolororange">City of West Bend </td>
<td class="rowcolororange">October 30th </td>
<td class="rowcolororange">4:00 p.m.- 6:00 p.m. </td>
</tr>
<tr>
<td class="halloweencell">Town of Addison </td>
<td class="halloweencell">October 30th </td>
<td class="halloweencell">3:00 p.m. - 6:00 p.m. </td>
</tr>
<tr>
<td class="rowcolororange">Town of Barton </td>
<td class="rowcolororange">October 30th </td>
<td class="rowcolororange">4:00 p.m. - 6:00 p.m. </td>
</tr>
<tr>
<td class="halloweencell">Town of Erin </td>
<td class="halloweencell">No Set Schedule </td>
<td class="halloweencell"> </td>
</tr>
</table>
It is located at: www.washingtoncountysheriffwi.org/halloween.php Any suggestions? Thanks! Helen Hi All, I am trying to make my table do the attached, where it has a border around the entire table but has a 2px space edge... Like the attched image, any ideas? OK...thbbt. Situation 1 (the one that works as I want) Code: <table style="width: 100%">
<tr>
<td style="width: 15em">Column 1</td>
<td>Column 2</td>
</tr>
</table>
In Situation 1, the second column expands to be all of the remaining width. This is good. Situation 2 Code: <table style="width: 100%">
<tr>
<td style="width: 15em">Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</table>
In Situation 2, column 2 and 3 share the remaining space. I want column 2 to take no more than exactly the space it needs. I want column 3 to expand to take all the remaining space. The only way I've found that (sorta) works is to actually use the old HTML width="" attribute and make it a percentage that's impossible. If you make it 95% or something, then all the other columns squeeze down pretty far. The issue with this approach is that it ignores the style width of the first column and just crushes it as much as possible. Anyone have an idea? Thanks Tim Hi i am trying to display small divs next to each other on one row, when i put clear left on the div that i want on the left, so that it puts it on the next line, the 3 divs then jump right down the page, putting a massive gap between this and the content above, is there a way to stop this happening? the code i have is html Code: <div id="arrow1">arrow1</div> <div id="arrow2">arrow2</div> <div id="arrow3">arrow3</div> Code: #arrow1 {
background-image:url(images/arrow.gif) ;
background-position:top left;
background-repeat:no-repeat;
width:176px;
height:96px;
float:left;
display:inline;
clear:left;
}
#arrow2 {
background-image:url(images/arrow.gif) ;
background-position:top left;
background-repeat:no-repeat;
width:176px;
height:96px;
float:left;
display:inline;
}
#arrow3 {
background-image:url(images/arrow.gif) ;
background-position:top left;
background-repeat:no-repeat;
width:176px;
height:96px;
float:left;
display:inline;
}
Hi, I have centered a table horizontally and vertically. To do this I put a table inside a table. so i don't want to use absolute positioning, as the position would change if the window size changes... My problem, with relative positioning, is that I can't figure out how to put my "some text" over an image -which is inside the table cell- in the exact position i want, without "collateral damage"... The collateral damage is that if I put the <div> tag inside the table (see example 1), it will occupy the space and as result the image wll be moved down and layout won't be centered vertically anymore... If I put the <div> tag outside the table (see example 2), as result there will be more occupied space at the top, and the layout isn't centered anymore... Here you can see the code i used for both example 1 and example 2: example 1: <html> <head> <title>relative problem - example 1</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <table border=1> <tr> <td width="640" height="480"> <div id="Layer1" style="position:relative; left:50px; top:50px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> example 2: <html> <head> <title>relative problem - example 2</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <div id="Layer1" style="position:relative; left:0px; top:200px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <table border=1> <tr> <td width="640" height="480"> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> thx for letting me know... I'm *very* new to CSS and to these forums, I'm glad I found them. I'm hoping someone can help me with this problem I'm having. I added a table to this page and there are gaps under each word in each cell of the table. I added the same table to it's own page and the table shows up the way I want it but it won't on the page where CSS is used. It seems as if something in the CSS code is causing the gap under the words. Would anyone know why this is happening and how to fix it? I'm using IE 6 and haven't used any other browser yet to view the pages. Here is my css file http://debsdesignandhosting.com/layout.css in case it's needed. Thanks for any help I thought I should also say, it's not my intention to spam the forum with the info seen in the table. This is a new site not even live yet. This gap problem has me stumped Deb I hope one of you can help, as this is driving me mad. I've got a div that I'm using to display a background colour that has a fixed width and height="100%" (I'm having a problem with the hieght as well but I'm confident I can sort that), as soon as I change the declaration at the top of the page from the HTML 4.01 Transitional to the XHTML 1.0 Transitional the div disappears, why? Cheers, Ellroy I am developing websites using ASP.NET and C# for the code-behind. I just started using css design and I realized after trying to validate my rendered pages that some things in ASP.NET would be VERY difficult to make completely valid. IE: ASP.NET automatically renders this piece of code everytime the page is rendered: Code:
<script language="javascript">
<!--
function __doPostBack(eventTarget, eventArgument) {
var theform;
if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {
theform = document.forms["frm"];
}
else {
theform = document.frm;
}
theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
theform.__EVENTARGUMENT.value = eventArgument;
theform.submit();
}
// -->
</script>
That right there is invalid due to the fact that it does not have type="text/javascript" in the <script>. There are many other instances of this that I won't go into detail. In order to fix this you have to override ASP.NET's page rendering methods and do a Regex! thats right, a regex on EACH line of code to replace the line above with valid XHTML. This can become VERY inefficient if you are serving 30+ pages a second. My question is this: at this point is it really worth the performance hit on my web server to make my asp.net sites XHTML compliant? on a side note, I would like to bludgeon the MS designer that wrote these chunks of code into ASP.NET!@!$%#$ thanks! I've seen several examples of how to emulate frames using CSS, but I haven't seen anywhere explain how to create "frames" without having to add the entire frame code to every page in which it appears. With frames, I used to be able to create a menu which would appear throughout my site. I would modify the one, single menu.html file, and the changes would be visible throughout the site. How can I do this using the CSS-emulated frames? Thanks Hello, I was just wondering how XHTML and CSS works within data-driven websites. I am new to developing database driven sites and need to develop one that uses XHTML and CSS formatting for content as this is what the company I work is aiming towards, due to web accessibility requirements. Does anybody know of any good books/resources that cover developing database driven (php/mysql) websites and implementing XHTML/CSS from within these sites. Would I be right to say that an area for the database content is created in the page which is written in XHTML? if this is correct does this area link to the CSS? Any help would be gratefully appreciated.... Thanks, Andy I'm having some serious difficulties... but not the standard, "what's wrong with my code", everything validates properly. Seperately... I really dislike linking outside of a forum to describe a situation... but in this scenario I think it is the only feasible way to explain it. The template that I have created for my website validates as, xhtml 1.1 -- tentatively as do all other documents that validate against the formal parsing. See the following to understand my situation. EDIT: Validation of my pages template in html format. - yay! it validates as XHTML 1.1 EDIT: Validation of my pages stylesheet - yay! it validates as CSS 2.0 EDIT: Validation of them both together returns the following: - Boooo! It won't validate and also tells me: Code: "Please, validate your XML document first! Line 2 Column 3 The markup declarations contained or pointed to by the document type declaration must be well-formed. " I would have thought that these things are dependent on eachother. Does it make sense that something can pass a XHTML compliant, but then be formed badly in such a way that a formal parser would read it wrong with respect to CSS? Is it because of my comments? If you look at the code of the page I have detailed a few things that I thought were important. Hi, I want to validate my page to XHTML 1.1, but to do that I need to remove border="0" (Only used on two header images). I have tried putting border-style:none in my CSS in EVERY place I could think of, but it just doesn't work. My css is he http://www.planetphillip.com/style.css One other thing, when I remove the border="0" code, IE6 vertically re-aligns the header images. Would somebody be kind enough to explain why. BTW the site in question is: http://www.planetphillip.com/ TIA Phillip I am building a new navigation menu which works fine as you can see below: http://www.hotlinkhosting.com/test/menu.php However, the following version does not: http://www.hotlinkhosting.com/test/menu.php?. The difference between the two is that the first one doesn't have a doctype set. The second version has a xhtml doctype. All my documents are written in xhtml so it must be done. I see that the problem occurs with my resizing of the <h1> and <h2> tags with css. After resizing the space the heading tags normaly take up is still their. Feel free to take a look at the source code and I hope you can help. Btw, I know the nav menu doesn't look right in ie, but that isn't my fault now is it? I can't help it ie can't read code correctly. Anyways After I get the menu working with "real" browsers I'll fix the ie errors. In my ongoing project I am making a complex fixed footer that has downloadable resources. I am placing three social network 64x64 thumbnails linking to those sites side by side. The question I am conflicted with is should I make the images available in the xhtml mark up between the <li> tags or should I create images in the css as separate divs inside the footer with floating properties so that they line up next to each other? I know it is a matter of file size vs preference but in this case it seems there would be less code all around by placing it in the <li> tags in the xhtml and styling the <li> as inline rather than creating three separate divs and styling those in the css that goes along with it. Or is there an easier way entirely? Thanks for your thoughts LB I've got simple webpage like this: <html> <style type="text/css"> div { font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px;} td { font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px;} input { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; vertical-align: middle;} select { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; vertical-align: middle;} </style> <body> <div> <select onchange="" style="width: 210px;"> <option value="0"> aa </option> <option value="1"> bb </option> <option value="2"> cc </option> </select> </div> <div> <table cellspacing="0" summary="" style="height: 210px; width: 210px; nowrap; border: solid #666666 1px; overflow: auto;"> <tr> <td> table </td> </tr> </table> </div> <div> <input name="custom" type="text" style="width: 210px;" value="" /> </body> </html> Everything is ok until I put XHTML DOCTYPE. After that width of <INPUT> tag is not the same as in <TABLE> or <SELECT>. What am I doing wrong? How to fix it? Elephant OK, I've been pulling my hair out here. I've been googling around for a couple days now trying to find some solution to this.... I have been crunched by what I think is a nasty little bug within IE6 when running with a DocType of XHTML 1.0 Transitional. Observe he http://www.drcwbt.com/codetests/scrolltest.htm My problem: The horizontal scrollbar. It's nasty. I need to get rid of that puppy. Only happens on IE6 AND when running XHTML DocType. My attempted (and failed) solutions: My Googles led me to what looked like a similar bug in IE 5 Mac. Unfortunately, those solutions don't help me here Addition of MS only "overflow-x:hidden" property. While this does get rid of the scrollbar, it also chops off the rightmost edge of the content within the DIV. What is this? XHTML don't like the css scrollbar styles... CSS scrollbars is only supported in IE 5.5++. I'm using IE 6.0... try it in IE 5.5...see if it works... Code:
body {
background-color: #a7b1ae;
background-image:url('../images/bg.gif');
margin-left: 30px;
margin-right: 30px;
margin-top: 0px;
margin-bottom: 0px;
scrollbar-face-color: #96A096;
scrollbar-shadow-color: #96A096;
scrollbar-highlight-color: #96A096;
scrollbar-3dlight-color: #9AB6C4;
scrollbar-darkshadow-color: #20253A;
scrollbar-track-color: #738278;
scrollbar-arrow-color: #000000;
}
I include this in a .html XHTML file with: Code: <link rel="stylesheet" type="text/css" href="sub/deworks.css" /> ok... here is the whole XHTML file named sc.html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>css scrollbars</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="sub/deworks.css" /> </head> <body> <p>hello</p> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> </body> </html> now the scrollbar css doesn't work... but if i remove the Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> It works perfectly! hmmm how strange... is w3s XHTML .dtd files ****ed up? or doesn't XHTML support css scrollbars? please help... -meself |
|||||||