CSS Help Text Over IMG

Discussion in 'Web Design & Coding' started by blah19, Aug 12, 2004.

  1. blah19

    blah19 Still learning

    Messages:
    5
    Location:
    Ohio
    Hi, Im trying to Code a page with a topbar and left links layout I want to move text over the topbar img by using a negative margin-top, It looks great in most browsers like FireFox and Netscape, But in IE it is covered by the Topbar img, I do not want to make it a BG img becase it will not strech or shrink, only cut, so my question is, How do you put text in a strechable image without actualy imbedding it into the img? Heres my code:
    <title>Engineering Studies</title>

    <link href="../snd/Styles1.css" rel="stylesheet" type="text/css">
    </head>

    <body>
    <table height="100%" width="100%" border="0" cellpadding="0" cellspacing="0" id="mainbody">
    <tr>
    <td width="209" height="15"><img src="Tl.jpg" width="209" height="140"></td>
    <td width="100%"><div align="left"><img src="TopBar.jpg" width="100%" height="140"></div></td>

    </tr>
    <tr>
    <td width="209" background="Extention.jpg" class="centertop">
    <p><a href="../index.htm" class="leftlinks">Home</a></p>
    <p><a href="../Substation Design/index.htm" class="leftlinks">Substation Design</a></p>
    <p><a href="../Transmission Line Design/index.htm" class="leftlinks">Transmission Line Design</a></p>
    <p><a href="../Distribution Line Design/index.htm" class="leftlinks">Distribution Line Design</a></p>
    <p><a href="../Relaying and Controls/index.htm" class="leftlinks">Relaying and Controls</a></p>
    <p><a href="../Engineering Studies/index.htm" class="leftlinks">Engineering Studies</a></p>
    <p><a href="../Project Management/index.htm" class="leftlinks">Project Management</a></p>
    <p><a href="../Contact Us/index.htm" class="leftlinks">Contact Us</a></p>
    <p><a href="../About Us/index.htm" class="leftlinks">About Us</a></p>
    <p><a href="../Order/index.htm" class="leftlinks">Order</a></p>
    <BR><BR><BR>
    </td>
    <td valign="top" width="100%">
    <!--Body-->
    <div class="title">Engineering Studies</div><BR>
    <div class="body">*Content Required*</div><BR>
    <div class="center"><div class="print2">&copy; 2004 MK Power Solutions, All rights reserved</div></div>
    </td>

    </tr>
    </table>
    </body>
    </html>

    And Heres the relavent CSS:
    .title
    {
    text-align:center;;
    margin-top:-110px;
    font-size:50px;
    text-decoration:none;
    color:#000000;
    }

    Thanks,
     
  2. Geffy

    Geffy Moderator Folding Team

    Messages:
    7,805
    Location:
    United Kingdom
    MSIE doesnt support CSS properly, it has the poorest quality CSS support of any other currently existing browser.
    Welcome to the world of web design and the ensuing headaches caused by MSIE's buggy CSS implementation, this is commonly known as the IE-Factor

    If MSIE had an EditCSS plugin then I would give it a shot to try and make it work, but it doesnt so I cant really do much. Basically its a case of you going though and messing with little pieces of code here and there until it works on both, or you could use PHP to test the User Agent string for MSIE and serve a different css file based on that. Maybe with less candy in it, or simply alternative css to obtain the same effect

    PHP:
    <?php 
    $css 
    "style.css";

    if (
    eregi("MSIE"$_SERVER['HTTP_USER_AGENT'])) {
        
    $css "msie.css";
    }
    ?>
    Then in your HTML code use this (as I see you are using HTML and not XHTML) in your tag to include the style sheet
    PHP:
    <link href="<php? echo $css; ?>" ref="stylesheet" type="text/css">
     
  3. Khayman

    Khayman I'm sorry Hal... Political User Folding Team

    Messages:
    5,518
    Location:
    England
    is this code live anywhere so i can see what its supposed to be doing?
     
  4. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    Nice little blog about the IE factor. Does there happen to be a list with known CSS/HTML bugs in IE?
     
  5. blah19

    blah19 Still learning

    Messages:
    5
    Location:
    Ohio
    Hey, I found an alt way to do it, I used absolute positioning, take a look
    Mk Power Solutions
    thanks for the help all.
     
  6. blah19

    blah19 Still learning

    Messages:
    5
    Location:
    Ohio
    err. sorry, go to one of the links... Thats where i used it About Us