PDA

View Full Version : CSS is evil




floyde
Dec 17, 2005, 12:47 PM
Maybe it's the fact that I didn't even read anything about it before using it, but I'm really hating CSS right now. I'm trying to create the table that's on the attached picture. For some reason, I can align that table to the address bar on Firefox but not on IE6 (ie. there's a small gap between the address bar and the table), and I can align it on IE6 but not on Firefox, but never both :(
This is the css bit:
div.CenteredMenu
{
text-align: center;
}
div.CenteredMenu table
{
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.Menu
{
display: block;
font-weight: bold;
vertical-align: sub;
width: 600px;
color: white;
font-family: Verdana;
height: 25px;
background-color: dimgray;
text-align: center;
}
and here is the html:
<div class="CenteredMenu">
<table class="Menu">
<tr>
<td>Some text</td>
</tr>
</table>
</div>
Right now it works on Firefox but not on IE6. The body has a margin of 0. I'm a C# developer but somehow I find CSS to be extremely cryptic (in its use not its syntax), or maybe I just need to get some sleep. What am I doing wrong? pleas help me, thanks



Daveway
Dec 17, 2005, 12:56 PM
I haven't mastered CSS yet, but I think its your margin tags. IE6 interprets margins differently in CSS that other browsers (why M$, WHY?). Google IE6 CSS margin fix.

Otherwise wait for the CSS masters to arrive here....shouldn't be long.

radiantm3
Dec 17, 2005, 01:34 PM
Did you set the body padding to zero as well? Usually the first line of CSS code I use is this:



*{
margin: 0px;
padding: 0px;
border: 0px;
}


This basically gives every element zero margins/padding/borders from the start. It will probably save you some bandwidth in the long run and save you a lot of time finding spacing issues later on as well.

floyde
Dec 17, 2005, 02:11 PM
Thanks guys, I tried both of your suggestions, but still no luck. I found another solution though, I'll just kill myself, that'll make the pain go away, right?;) :D heheh I guess I'll just focus on the rest of the page for now, I'm wasting too much time on this.

Stinkythe1
Dec 17, 2005, 02:32 PM
I've tried using CSS but because of the way IE's acts retarted with it, I don't use it anymore. Sticking with tables (probably indefinently) until IE gets their act together.

iMeowbot
Dec 17, 2005, 03:20 PM
Floyde, I tried exactly (I think?) the code you posted with IE 6.0.2900.2180 and it displays exactly the same as in Safari, Camino and Mac IE5. For reference, I'm including exactly the page I am loading. Is it possible that something else in your code is causing the weird table formatting?


<html>

<head>
<style type="text/css">
<!--
div.CenteredMenu
{
text-align: center;
}
div.CenteredMenu table
{
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.Menu
{
display: block;
font-weight: bold;
vertical-align: sub;
width: 600px;
color: white;
font-family: Verdana;
height: 25px;
background-color: dimgray;
text-align: center;
}
-->
</style>
</head>

<body>
<div class="CenteredMenu">
<table class="Menu">
<tr>
<td>Some text</td>
</tr>
</table>
</div>
</body>

</html>


(Of maybe I'm not understanding something here. Is that weird trapezoidal thing really what IE is giving you?!!)

floyde
Dec 17, 2005, 03:39 PM
Floyde, I tried exactly (I think?) the code you posted with IE 6.0.2900.2180 and it displays exactly the same as in Safari, Camino and Mac IE5. For reference, I'm including exactly the page I am loading. Is it possible that something else in your code is causing the weird table formatting?

Yes, I'm using ASP .NET so there's a lot of extra stuff that Visual Studio .NET adds to the code. Here is the actual page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Empresas - Gasinbursa.net</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<LINK href="css/Style.css" type="text/css" rel="stylesheet">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<uc1:Menu id="Menu1" runat="server"></uc1:Menu>

That last part "<uc1:Menu id="Menu1" runat="server"></uc1:Menu>" is a user control that contains this:
<div class="CenteredMenu">
<table class="Menu">
<tr>
<td>Some text</td>
</tr>
</table>
</div>
In addition to that, there is the CSS for the "Body" tag:
body
{
margin: 0px;
}
I thought the problem was the MS_POSITIONING, but removing it doesn't help. I think the problem is the "CenteredMenu" which is a trick I found on the net to center tables on all browsers. If I remove that "CenteredMenu" and work on the style for the table itself, then I can fix the margin problem, but I can't find a way to center the table on both IE6 and Firefox with this approach. Did you try it on Firefox too?

bobber205
Dec 17, 2005, 03:39 PM
The fact that you are using "auto" as a property could be what makes different reuslts in the each browser.

Set all to zero.

floyde
Dec 17, 2005, 03:41 PM
(Of maybe I'm not understanding something here. Is that weird trapezoidal thing really what IE is giving you?!!)
No, sorry about that, hehe, it is currently only a rectangle. The trapezoid is my final aim My problem right now is that I want it to align to the top of the browser window

floyde
Dec 17, 2005, 03:44 PM
The fact that you are using "auto" as a property could be what makes different reuslts in the each browser.

Set all to zero.
That bit of code is there to center the table in both IE and Firefox. It's probably what is causing me so much trouble though. Do you know a way to center tables that works on all browsers?

rendezvouscp
Dec 17, 2005, 05:03 PM
I've tried using CSS but because of the way IE's acts retarted with it, I don't use it anymore. Sticking with tables (probably indefinently) until IE gets their act together.

Don't give up on standards! Really, it's better to write your code to the standards and then fix IE problems later. If you have certain problems, do some quick research for a fix or post here.

That bit of code is there to center the table in both IE and Firefox. It's probably what is causing me so much trouble though. Do you know a way to center tables that works on all browsers?

What you need to center something is...


div.CenteredMenu {margin: 0 auto;
text-align: center;
width: 100%}


...or something along those lines to fix it how you like. If you're writing the CSS into <style> tags, then don't put a comment around the CSS, as so!


<style type="text/css">
<!--
code {code}
-->
</style>


If you give us a page to work with, it might be a little bit easier so we can see everything that's going on.
-Chase

iMeowbot
Dec 17, 2005, 05:09 PM
That bit of code is there to center the table in both IE and Firefox. It's probably what is causing me so much trouble though. Do you know a way to center tables that works on all browsers?
Oh, you want that top gap gone? position:absolute will get you smack up to the top across the browsers, but that kind of kills the idea of using CSS to center horizontally. You choices, then, would be resorting to either browser sniffing or legacy HTML.

floyde
Dec 18, 2005, 01:03 AM
Well after much random fiddling I finally came up with a cross-browser, auto-centering, top-aligned, wonder table. And it only took me a day to figure it out!:rolleyes: :eek: I don't even know what I did to fix it, but if you ever need one, here it is:

div.CenteredMenu
{
text-align: center;
}
div.CenteredMenu table
{
margin: 0 auto;
text-align: left;
}
.Menu
{
padding-right: 0px;
padding-left: 0px;
font-weight: bold;
font-size: smaller;
padding-bottom: 0px;
margin: 0px;
width: 600px;
color: white;
padding-top: 0px;
font-family: Verdana;
top: 0px;
height: 25px;
background-color: dimgray;
}
thanks for all the help

kainjow
Dec 18, 2005, 01:35 AM
Isn't padding: 0px; the same as padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px; ?

Also, when I'm doing any web design stuff, I validate my code in iCab as I go. iCab has a little smile that is a sad face when your code isn't 100% fit to a standard. It's a very nice feature of the rarely-used browser that works very well and is fast :) http://www.icab.de

Rower_CPU
Dec 18, 2005, 01:46 AM
Isn't padding: 0px; the same as padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px; ?

Yup. It's even better to just go with
padding: 0;
since 0 doesn't need a unit. Saves two whole characters! :)

As far as the original post goes, you really don't need a table in there at all and that's probably why you were having issues.

Here's a really simple way to center something (in this case a <p>)that's fairly cross-browser safe:


.center {
text-align: center; /* Needed for older versions of IE */
}
.container {
margin: 0 auto; /* Centers the element for the browsers that "get it". */
width: 200px; /* Can be whatever, but without it it's hard to tell that anything's centered */
}
.container p {
text-align: left; /* Reset the text alignment */
/* Any other styes you need */
}

Then your HTML is just:


<div class="center">
<div class="container">
<p>My centered text.</p>
</div>
</div>

iMeowbot
Dec 18, 2005, 02:04 AM
Well after much random fiddling I finally came up with a cross-browser, auto-centering, top-aligned, wonder table. And it only took me a day to figure it out!:rolleyes: :eek: I don't even know what I did to fix it, but if you ever need one, here it is:

I'm still seeing a big gap between the address bar and gray box in IE6 with that CSS. Isn't that the part you were trying to make go away? :confused:

floyde
Dec 18, 2005, 11:13 AM
Isn't padding: 0px; the same as padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px; ?

Well, I was running out of options when I did that, hehe:)
As far as the original post goes, you really don't need a table in there at all and that's probably why you were having issues.

Yes I've seen some very cool pages done entirely with divs. I definitely want to learn to do that some day.
I'm still seeing a big gap between the address bar and gray box in IE6 with that CSS. Isn't that the part you were trying to make go away?
lol, I swear it works for me now, that's very strange.

This is what I was trying to do (please ignore the colors for now, my PC LCD tells me lies about them), it's sad because it doesn't even look that good afterall: