|
CSS - Border And Xhtml 1.1
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 Similar TutorialsHi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style. If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? Thanks... Hi, This used to be my solution: Code: <table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'> But this only works well on IE - not Mozilla Now I want to use CSS: Code:
.results {
border: 1px solid #CCCCCC ;
}
Code: <table class='results'> --------------- The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't. If I specify Code: <td class='results'> for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping). Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration? Thanks a lot! I would like to set up a table with a different border than the cells inside it. Here's my code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
TABLE {border: 1px solid black; border-collapse: collapse; width: 200px}
TD {border: 1px solid #ccc}
</style>
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
That's all hunky dory in (gasp!) IE, but good browsers...they only show the lighter gray color. How do I get the table border to be different? How do you create an inner border around a table in css, rather than a "solid" border which creates a border line around the table on the outer half. The border needs to butt up against an image, rather than leaving a pixel space. This is the coder I have so far. Nothing big: Code:
.solid {
border: solid 1px #000000;
}
Thanks. 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'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. 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 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. 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, getting to grips with desiging my site with CSS now, but a question that I had is, do I use HTML for my site or XHTML? If someone could explain the differences and benefits it would be really helpful. I am fairly good with HTML but I haven't ventured into XHTML before and if possible I'd really like it to be valid too. Any pointers, tips or comments for design with CSS would be great. 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 I had to redo my page because none of it was validating through w3c so I'm trying it again and attempting to get my css right however the widths of my divs correct to match my psd. Any thoughts on what I'm doing wrong? PSD jpg kansasoutlawwrestling.com/wrestling2.jpg Site kansasoutlawwrestling.com 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. 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 am new to xhtml and am working on my web page i want to use a graphic to split my different areas and the book i was using only showed how to put in a plain line, In .css PHP Code: h2 {border-top:1px solid #4D65A0} I have found a graphic i want to use from the animation factory cd's i have and now im lost as to how to put it in. new line: slash_blue_mw.gif sorry posted in the wrong spot b4 I'm new to css and have been impressed with the way you can make style changes to a whole site by just altering one stylesheet (if you've set if up right). My question is, can css or xhtml be used to do that with content? I want to create a site with a Nav column floated on the left hand side of every page, but I'm worried I'd have to change hundreds of pages if i ever added/altered the column. Is there any way I can get every page to pull a table/other-xhmtl from one source, maybe by putting something in the stylesheet? Thanks. Would it be worth it to redesign this site (http://www.innerspect.net/) using CSS only for the layout, instead of tables? Making a few things look cleaner as well (Fonts / layout positions / etc)? Could someone give me tips for doing this. Thanks. (i.e. use what for the main body, something inside that nested for the left side, right, etc.)? |
|||||||