Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CSS is evil

floyde

macrumors 6502a
Original poster
Apr 7, 2005
808
1
Monterrey, México
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:
Code: 
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:
Code: 
<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
 

Attachments

  • table.jpg
    table.jpg
    6.1 KB · Views: 300
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.
 
Did you set the body padding to zero as well? Usually the first line of CSS code I use is this:

Code: 
*{
    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.
 
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.
 
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.
 
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?

Code: 
<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?!!)
 
iMeowbot said:
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?
Click to expand...
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:
Code: 
<!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:
Code: 
<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:
Code: 
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?
 
The fact that you are using "auto" as a property could be what makes different reuslts in the each browser.

Set all to zero.
 
iMeowbot said:
(Of maybe I'm not understanding something here. Is that weird trapezoidal thing really what IE is giving you?!!)
Click to expand...
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
 
bobber205 said:
The fact that you are using "auto" as a property could be what makes different reuslts in the each browser.

Set all to zero.
Click to expand...
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?
 
Stinkythe1 said:
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.
Click to expand...

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.

floyde said:
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?
Click to expand...

What you need to center something is...

Code: 
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!

Code: 
<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
 
floyde said:
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?
Click to expand...
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.
 
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:

Code: 
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
 
Isn't
Code: 
padding: 0px;
the same as
Code: 
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
 
kainjow said:
Isn't
Code: 
padding: 0px;
the same as
Code: 
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
?
Click to expand...

Yup. It's even better to just go with
Code: 
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:

Code: 
.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:

Code: 
<div class="center">
  <div class="container">
    <p>My centered text.</p>
  </div>
</div>
 
floyde said:
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:
Click to expand...

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:
 
kainjow said:
Isn't
Code: 
padding: 0px;
the same as
Code: 
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
?
Click to expand...
Well, I was running out of options when I did that, hehe:)
Rower_CPU said:
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.
Click to expand...
Yes I've seen some very cool pages done entirely with divs. I definitely want to learn to do that some day.
iMeowbot said:
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?
Click to expand...
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:
 

Attachments

  • table.jpg
    table.jpg
    46.1 KB · Views: 230
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back