Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    1
    Thanked 1 Time in 1 Post

    Internet Explorer Style works in Firefox 2 but not IE .. help please

    http://www.seaworldtours.com/test/
    It works fine just how i want it to in Firefox .. but not in IE .. I thought maybe IE was over it's CSS centering problems .. but appreantly not. Or maybe it is just me .. I wondered if someone could point me in the right direction .. or fix it for me either is fine .... (to see what i want check in Firefox2 and then check it in IE .. the logo doesn't go where it's meant to. I may have a very simple coding error .. it may be impossible ... i just got too confused trying to get it to work in both )
    the source code for that page is:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="swexmain.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
      <div class="contentbox"><div class="logo"><img src="../images/logo.png" alt="Seaworld Explorer" width="334" height="159"></div>
        <table width="100%"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="29" height="29">&nbsp;</td>
          <td height="29" background="../images/top.png">&nbsp;</td>
          <td width="29" height="29" background="../images/topright.png">&nbsp;</td>
        </tr>
        <tr>
          <td width="29" background="../images/left.png">&nbsp;</td>
          <td><p>content will go here and ....</p>
            <p>here .................................</p>
            <p>and then some more  - here  </p>
            <p>and .......... maybe here too </p>
            <p>and so on ......... and so on </p>
            <p>&nbsp;</p></td>
          <td width="29" background="../images/right.png">&nbsp;</td>
        </tr>
        <tr>
          <td width="29" height="29" background="../images/bottomleft.png">&nbsp;</td>
          <td height="29" background="../images/bottom.png">&nbsp;</td>
          <td width="29" height="29" background="../images/bottomright.png">&nbsp;</td>
        </tr>
      </table></div>
    </body>
    </html>
    and the CSS style sheet is currently very simple and looks like this:
    Code:
    .contentbox {
    	text-align: center;
    	position: relative;
    	height: auto;
    	width: 800px;
    	margin: auto;
    	top:0px;
    }
    .logo {
    	position:relative;
    	top:75px;
    	left:-169px;
    	width:334px;
    	height:159px;
    }
    please .. any help would be very much loved.

    Giles

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Why are you using tables for page layout? Read the link in my sig titled "Why tables for layout is stupid?". Also your page appears to be messed up in Firefox 1.5.0.9 but then again we don't even know how its supposed to look. Take a screenshot and attach it so we know how it should look.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    1
    Thanked 1 Time in 1 Post

    screenshot

    Screenshot attached

    don't know why the server isn't working

    i don't know how to make the border and logo fit like that without tables ...feel free to educate me.
    Attached Thumbnails Attached Thumbnails Style works in Firefox 2 but not IE .. help please-clip.jpg  
    Last edited by caymaniac; 12-30-2006 at 07:32 AM.

  • #4
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    1
    Thanked 1 Time in 1 Post
    Guys

    I would still appreciate any help .. although my ISP seems to have blocked me from seeing myown site !! I can still ftp pages to it though.

    Giles

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Goodmorning caymaniac,
    I can't get to it now either.

    "Server not found"

    I'd try having a look at it if I had the images to work with.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    1
    Thanked 1 Time in 1 Post
    http://www.caymaniac.ky/swex/test/

    i put it up on another site for testing .. until i work out whats up with the server .. i thought it was an ISP thing.

    cheers for looking at this .. i like your sig .. i built it for Firefox .. and have no idea how t make IE like it.

    Oh and eventually i will want to put some buttons .. on the top outside side ofthe border .. css stylie that are maybe curved looking too. that whould be fairly easy right ?
    Last edited by caymaniac; 12-30-2006 at 11:04 PM.

  • #7
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    1
    Thanked 1 Time in 1 Post
    http://www.seaworldtours.com/test/

    seems to be working again now too.

    I have had some more playtime .. but I reverted back to the code above as I had no better results with the logo positioning in IE.

  • #8
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    1
    Thanked 1 Time in 1 Post

    getting there now !

    http://www.seaworldtours.com/test/

    Ok .. i changed a little of the CSS .. and made it work in both IE and Firefox .. still need to do backwards IE testing.

    if you are interested .. all i did was make the current style sheet look like this :
    Code:
    .contentbox {
    text-align: center;
    position: relative;
    height: auto;
    width: 800px;
    margin: auto;
    top:85px;
    }
    .logo {
    position:absolute;
    top:-85px;
    left:-157px;
    width:334px;
    height:159px;
    }

  • #9
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    1
    Thanked 1 Time in 1 Post

    now my menu won't position howi want it to in IE!

    Ok all my code is now below .. i went to go add in my navigation bar .. and again .. it works in Firefox .. but in IE .. it appears too far above the border .. it is spot on perfect in Firefox ... what can i do for that ?
    http://www.seaworldtours.com/test/
    thanks for the help again ...

    Code:
    .contentbox {
    	text-align: center;
    	position: relative;
    	height: auto;
    	width: 800px;
    	margin-left: 159px;
    	top:85px;
    }
    .logo {
    	position:absolute;
    	top:-85px;
    	left:-157px;
    	width:334px;
    	height:159px;
    }
    #navigation {
    	list-style-type: none;
    	position:absolute;
    	top:-30px;
    	left:350px;
    	}
    #navigation a
    {
    	color: #000;
    	background: #ffa20c url(../images/tableft.png) left top no-repeat;
    	text-decoration: none;
    	padding-left: 10px
    }
    
    #navigation a span
    {
    	background: url(../images/tabright.png) right top no-repeat;
    	padding-right: 10px
    }
    
    #navigation a, #navigation a span
    {
    	display: block;
    	float: left
    }
    
    /* Hide from IE5-Mac \*/
    #navigation a, #navigation a span
    {
    	float: none
    }
    /* End hide */
    
    #navigation a:hover
    {
    	color: #fff;
    	background: #df0218 url(../images/tablefthover.png) left top no-repeat;
    	padding-left: 10px;
    	padding-bottom; 10px;
    }
    #navigation a:hover span
    {
    	background: url(../images/tabrighthover.png) right top no-repeat;
    	padding-right: 10px;
    	padding-bottom: 6px;
    }
    #navigation ul
    {
    	list-style: none;
    	padding: 0;
    	margin: 0
    }
    #navigation li
    {
    	float: left;
    	margin: 0;
    	padding-right: 5px;
    }
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Seaworld Explorer :: Nassau Bahamas :: Semi Submarine Tours</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="swexmain.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>  
      <div class="contentbox">
      <ul id="navigation">
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>Trips</span></a></li>
    <li><a href="#"><span>Specials</span></a></li>
    <li><a href="#"><span>About us</span></a></li>
    <li><a href="#"><span>Contact us</span></a></li>
    </ul> 
        <div class="logo"><img src="../images/logo.png" alt="Seaworld Explorer" width="334" height="159"></div>
        <table width="100%"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="29" height="29">&nbsp;</td>
          <td height="29" background="../images/top.png">&nbsp;</td>
          <td width="29" height="29" background="../images/topright.png">&nbsp;</td>
        </tr>
        <tr>
          <td width="29" background="../images/left.png">&nbsp;</td>
          <td><p>content will go here and ....</p>
            <p>here .................................</p>
            <p>and then some more  - here  </p>
            <p>and .......... maybe here too </p>
            <p>and so on ......... and so on </p>
            <p>&nbsp;</p></td>
          <td width="29" background="../images/right.png">&nbsp;</td>
        </tr>
        <tr>
          <td width="29" height="29" background="../images/bottomleft.png">&nbsp;</td>
          <td height="29" background="../images/bottom.png">&nbsp;</td>
          <td width="29" height="29" background="../images/bottomright.png">&nbsp;</td>
        </tr>
      </table></div>
    </body>
    </html>

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello again caymaniac,
    Happy New Year!

    I finally got a chance to mess around with this last night, while waiting for the ball to drop.
    A couple last tweaks on the menu and 2 validation errors today and it looks pretty good...except I notice you changed the logo a little.
    Have a look at it here.
    -CSS and XHTML 1.0 Strict
    -No tables
    -Validates
    - - expands with content and doesn't seem to break anywhere with text resize. /*Back again, seems like the menu breaks with resize. Should probably just make buttons for that*/
    -No js and minimal hacks
    -Tested on IE6 and FF2 on an XP box
    -Tested on IE7 and FF2 on a Vista box
    Last edited by Excavator; 01-01-2007 at 10:24 PM. Reason: edit
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    1
    Thanked 1 Time in 1 Post

    wow .. thats impressive

    see i never thought to combine the images like that

    the menu on hover extends a little far down .. but it works when resized for me ...

    very interesting to see how you went about it as well .. it has kinda opened my eyes to how it is meant to be done.

    thank you so much. Seeing this should keep me in good standing for the future .. thanks so much

    http://www.seaworldtours.com/test/index.php is my variation where the menu hovers are tidied up a little bit.
    Last edited by caymaniac; 01-01-2007 at 10:52 PM.

  • #12
    Regular Coder
    Join Date
    Apr 2006
    Posts
    117
    Thanks
    2
    Thanked 0 Times in 0 Posts
    The Contacts button seems off Under Firefox 2 with a 1280 x 1024 Res.

    I will look into it if you need help, but you may want to resolve it on your own.

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    the menu on hover extends a little far down
    10px margin I left in by mistake. It's fixed now.

    I still say it would be better to make those tabs with images, they would handle text resize much better.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #14
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Tyrial101 View Post
    The Contacts button seems off Under Firefox 2 with a 1280 x 1024 Res.
    It seems fine on my test site .. http://www.seaworldtours.com/test/

    And I may think about doing the tabs as images .. it may work a little better you are right.

    Giles

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Goodmorning caymaniac, (have to wonder about that nic )

    I keep trying to goto http://www.seaworldtours.com/test/ but it never works. It's been dead for a few days.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •