CSS is evil

Discussion in 'Web Design and Development' started by floyde, Dec 17, 2005.

  1. macrumors 6502a

    floyde

    Joined:
    Apr 7, 2005
    Location:
    Monterrey, México
    #1
    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 Files:

  2. macrumors 68040

    Daveway

    Joined:
    Jul 10, 2004
    Location:
    New Orleans / Lafayette, La
    #2
    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.
     
  3. macrumors 65816

    radiantm3

    Joined:
    Oct 16, 2005
    Location:
    San Jose, CA
    #3
    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.
     
  4. thread starter macrumors 6502a

    floyde

    Joined:
    Apr 7, 2005
    Location:
    Monterrey, México
    #4
    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.
     
  5. macrumors regular

    Joined:
    Mar 30, 2005
    #5
    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.
     
  6. macrumors G3

    iMeowbot

    Joined:
    Aug 30, 2003
    #6
    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?!!)
     
  7. thread starter macrumors 6502a

    floyde

    Joined:
    Apr 7, 2005
    Location:
    Monterrey, México
    #7
    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?
     
  8. macrumors 68020

    bobber205

    Joined:
    Nov 15, 2005
    Location:
    Oregon
    #8
    The fact that you are using "auto" as a property could be what makes different reuslts in the each browser.

    Set all to zero.
     
  9. thread starter macrumors 6502a

    floyde

    Joined:
    Apr 7, 2005
    Location:
    Monterrey, México
    #9
    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
     
  10. thread starter macrumors 6502a

    floyde

    Joined:
    Apr 7, 2005
    Location:
    Monterrey, México
    #10
    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?
     
  11. macrumors 68000

    Joined:
    Aug 20, 2003
    Location:
    Long Beach, California
    #11
    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.

    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
     
  12. macrumors G3

    iMeowbot

    Joined:
    Aug 30, 2003
    #12
    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.
     
  13. thread starter macrumors 6502a

    floyde

    Joined:
    Apr 7, 2005
    Location:
    Monterrey, México
    #13
    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
     
  14. Moderator emeritus

    kainjow

    Joined:
    Jun 15, 2000
    #14
    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
     
  15. Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #15
    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>
     
  16. macrumors G3

    iMeowbot

    Joined:
    Aug 30, 2003
    #16
    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:
     
  17. thread starter macrumors 6502a

    floyde

    Joined:
    Apr 7, 2005
    Location:
    Monterrey, México
    #17
    Well, I was running out of options when I did that, hehe:)
    Yes I've seen some very cool pages done entirely with divs. I definitely want to learn to do that some day.
    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:
     

    Attached Files:

Share This Page