Forum Moderators: open
I´m having problems with a html page.
I coded my html page using tables and ccs and it was fine, until I put it in an application server that parses it and it includes line breaks after some html tagas.
The result, my page is not the same. The tables were crazy and the layout is broken.
Is there any way to tell the browser that don´t take care about the lines return after a tag?
Thanks a lot
You may want to verify that borders, padding, and margins are declared and set to zero. Also be careful with spacer images, if you declare only the width, browers will presume the height should be the same. Also, using ' ' instead of spacer images can be trouble. The min height of that cell is now the height of your blank space.
Learn CSS and DIV boxes, you will be a better designer for having done so. Also, I hear DIV boxes load faster, but in all honesty I have never been able to tell.
You could sticky your code or URL and I will be able to take a better look at it for you.
Well I haven using tables and divs in order to get the layout I want. I got what I expect but when I put the page on an application server, this parse the page and everything goes wrong. Look at this example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test page</title>
<style type="text/css">
A{
text-decoration:none;
border:0px solid black;
}
A:hover{
color:#F4941B;
}
.style1{
font:9px Trebuchet MS, Arial, Helvetica, sans-serif;
text-align:left;
color:#6AB4FB;
font-weight:normal;
margin:3px 0px 0px 8px;
line-height:14px;
}
</style>
</head>
<body bgcolor="#FFFFFF">
<table width="141px" cellspacing="0" cellpadding="0" border="0" align="left">
<tr>
<td><a href="w" class="style1">Option 1</a></td>
</tr>
<tr>
<td><a href="w" class="style1">Option 2</a></td>
</tr>
<tr>
<td><a href="w" class="style1">Option 3</a></td>
</tr>
</table>
<table width="141px" cellspacing="0" cellpadding="0" border="0" align="left">
<tr>
<td>
<a href="w" class="style1">Option 1</a>
</td>
</tr>
<tr>
<td>
<a href="w" class="style1">Option 2</a>
</td>
</tr>
<tr>
<td>
<a href="w" class="style1">Option 3</a>
</td>
</tr>
</table>
<table width="141px" cellspacing="0" cellpadding="0" border="0" align="left">
<tr>
<td style="font-size:0px;">
<a href="w" class="style1">Option 1</a>
</td>
</tr>
<tr>
<td style="font-size:0px;">
<a href="w" class="style1">Option 2</a>
</td>
</tr>
<tr>
<td style="font-size:0px;">
<a href="w" class="style1">Option 3</a>
</td>
</tr>
</table>
</body>
</html>
In the first table is the original source html code I wrote, the second table is how the application server converts the html code and the third table is how I fixed including the font-size:0px style in each td.
The only differences between tables 1 and 2 are the lines break the parser includes after a <td> or </td> tag. It should be another way to tell the browser to ignore those line breaks instead to include the font-size style to each td tag
Thanks
well there are a couple of things. If your style is just for <a> tags, then use a.style1{styles} instead of just .style1, you will need to combine the text-decoration as well into this i believe:
Also, i am not positive on your css structure. Try putting this:
a.style1{
font-family: Arial, Helvetica, sans-serif;
font-size:9px;
}
also, what would font-size:0px do?
run your css code through a validator: [validator.w3.org...]
goodluck, let me know if this helped
Thanks for the advices, I´ll take care them
About the original problem... What browser are you testing with? because with iexplorer the second table draws different.
