CSS is evil

floyde · Dec 17, 2005, 01: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:

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

Daveway · Dec 17, 2005, 01: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, 02:34 PM

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.

floyde · Dec 17, 2005, 03: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?

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, 03: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 · 01:37 AM

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?!!)

floyde · Dec 17, 2005, 04:39 PM

Quote:

Originally Posted by iMeowbot

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:

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?

bobber205 · Dec 17, 2005, 04: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, 04:41 PM

Quote:

Originally Posted by iMeowbot

(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, 04:44 PM

Quote:

Originally Posted by bobber205

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, 06:03 PM

Quote:

Originally Posted by Stinkythe1

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.

Quote:

Originally Posted by floyde

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

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

iMeowbot · Dec 17, 2005, 06:09 PM

Quote:

Originally Posted by floyde

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, 02: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!

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

kainjow · Dec 18, 2005, 02:35 AM

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

Rower_CPU · 03:17 AM

Quote:

Originally Posted by kainjow

Isn't

Code:

padding: 0px;

the same as

Code:

padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;

?

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>

iMeowbot · Dec 18, 2005, 03:04 AM

Quote:

Originally Posted by floyde

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!

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?

floyde · Dec 18, 2005, 12:13 PM

Quote:

Originally Posted by kainjow

Isn't

Code:

padding: 0px;

the same as

Code:

padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;

?

Well, I was running out of options when I did that, hehe

Quote:

Originally Posted by Rower_CPU

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.

Quote:

Originally Posted by iMeowbot

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:

Dec 17, 2005, 01:47 PM	#1
floyde macrumors 6502a Join Date: Apr 2005 Location: Monterrey, México	CSS is evil 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 Attached Thumbnails __________________ "He who will not reason is a bigot; he who cannot is a fool; and he who dares not is a slave."

Dec 17, 2005, 01:56 PM	#2
Daveway macrumors 68040 Join Date: Jul 2004 Location: New Orleans / Lafayette, La	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. __________________ Spare me my life. MBP 2.2 glossy, Alu Macbook 2.4, iMac G5, iPhone3GS 32gb white, iPodz

Dec 17, 2005, 02:34 PM	#3
radiantm3 macrumors 6502a Join Date: Oct 2005 Location: San Jose, CA	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. __________________ My website* and my photos

Dec 17, 2005, 03:11 PM	#4
floyde Thread Starter macrumors 6502a Join Date: Apr 2005 Location: Monterrey, México	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? heheh I guess I'll just focus on the rest of the page for now, I'm wasting too much time on this. __________________ "He who will not reason is a bigot; he who cannot is a fool; and he who dares not is a slave."

Dec 17, 2005, 03:32 PM	#5
Stinkythe1 macrumors regular Join Date: Mar 2005 Location: Mississippi	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. __________________ 17" MacBook Pro 2.5 GHz 4 GB RAM hi-res screen http://www.brianfarris.net

Dec 17, 2005, 04:20 PM	#6
iMeowbot macrumors 601 Join Date: Aug 2003	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?!!) Last edited by iMeowbot : Jan 24, 2006 at 01:37 AM.

Dec 17, 2005, 04:39 PM	#8
bobber205 macrumors 68020 Join Date: Nov 2005 Location: Oregon	The fact that you are using "auto" as a property could be what makes different reuslts in the each browser. Set all to zero.

Dec 18, 2005, 02:03 AM	#13
floyde Thread Starter macrumors 6502a Join Date: Apr 2005 Location: Monterrey, México	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! 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 __________________ "He who will not reason is a bigot; he who cannot is a fool; and he who dares not is a slave."

Dec 18, 2005, 02:35 AM	#14
kainjow Demi-God (Moderator) Join Date: Jun 2000	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

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode