SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    site looks good in firefox, safari; looks awful in IE

    not sure what's going on here...i'm pretty much done with my first site (thanks to the helpful advice on this site). however, i've been testing it out exclusively on firefox and safari. unfortunately i checked it out in internet explorer maybe a bit too late, and my site looked like a disaster. any guidance as to what i should do without sacrificing the look i've done for safari/firefox. the navbar looks pretty crazy (located in the navigation div)...not sure how to align it. i've used the float left option to no avail...if anyone can explain, much appreciated.

    Code:
    /*
    CSS for Tim Portfolio site
    */
    
    
    body {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight:lighter;
    }
    a {
      font-weight: bold;
      color: black;
      text-decoration: none;
    }
    
    a:link {
      color: black;
      text-decoration: none;
    }
    
    a:visited {
      color: black;
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: none;
      color: #962f34;
    }
    
    a: active {
      color: aqua;
      background-color: navy;
    }
    
    li {
    list-style-type: none;
    }
    #bodycontent {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight:lighter;
    clear: left;
    padding-top: 34px;
    }
    div#navigation {
    height: 30px;
    width: 100%;
    margin: 0 0 0 105px;
    padding: 0 0 0 20px;
    font-size: 15px;
    line-height: 23px;
    font-family: "MS Trebuchet", Arial, Helvetica, sans serif;
    font-weight: 100;
    letter-spacing: 0;
    }
    div#navigation ul{
    white-space: nowrap;
    margin: 5px 0 0 0;
    }
    div#navigation li{
    margin: 5px 0 0 0;
    clear: right;
    }
    div#header img{
    float:left;
    width:300px;
    }
    div#heading {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    width: 150px;
    padding: 100px 0 0 138px;
    }
    div#contact {
    float: right
    width: 100px;
    font-size: 20px;
    padding: 0 0 0 300px;
    margin: -65px 0 0 0;
    }
    div#aboutcontent{
    width: 500px;
    font-size: 20px;
    float: left;
    padding: 0 0 0 300px;
    margin: -100px 0 0 0;
    }
    #navigation .current a {
    color: #962f34;
    }
    #links .current a{
    color: #962f34;
    }
    a.current {
    color: #962f34;
    }
    div#links {
    width: 300px;
    float: left;
    margin: 0 0 0 -25px;
    padding: 0 28px 0 0;
    font-family: "MS Trebuchet", Arial, Helvetica, sans serif;
    font-weight: 100;
    line-height: 50px;
    font-size: 18px;
    }
    div#gallery {
    padding: 20px;
    margin: 0 0 0 50px;
    height: 1000px;
    width: 1000px;
    }
    div#links ul{
    text-align: right;
    }
    
    	<head>
    	  <title>copywriter</title>
    	  <meta http-equiv="Content-Type"
    	  	content="text/html; charset=utf-8"/>
    	  	<link href="style1.css" rel="stylesheet" type="text/css" />
    	 </head>
    
    	<body>
    	<div id="header">
    	<img src="images/timheade***">
    	</div>
    	<div id="navigation">
    		<ul>
    			<li class="current"><a href="index*html">portfolio</a></li>
    			<li><a href="contact*html">contact</a></li
    			<li><a href="about*html">about</a></li>
    			<li><a href="resume*pdf">resume.pdf</a></li>
    		</ul>
    	</div><!--end of navigation div-->
    	<div id="bodycontent">
    	<div id="links">
    	     <ul>
    	         <li><a href="tivo*html">Tivo</a></li>
    	         <li><a href="rome*html">Rome</a></li>
    	         <li><a href="bondurant*html">Bondurant Racing</a></li>
    
    	      </ul>
    	      </div>

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <li><a href="contact*html">contact</a></li
    There seems to be a missing '>' which could be throwing off IE. It would be easier if you had a live test case for this, though.
    Cross browser css bugs

    Dan Schulz you will be missed

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    Code:
    <li><a href="contact*html">contact</a></li
    It would be easier if you had a live test case for this, though.
    I agree, although it's quite possible that could be the problem. I had a problem with my site in IE and i was swearing and cussing at explorer until i realised its cause i forgot to close a link, and it was just that the other browsers were ignoring the mistake while IE was not.

  4. #4
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by canassassin View Post
    I agree, although it's quite possible that could be the problem. I had a problem with my site in IE and i was swearing and cussing at explorer until i realised its cause i forgot to close a link, and it was just that the other browsers were ignoring the mistake while IE was not.
    hey guys, thanks for the help. i closed the link to no avail. i'll see what i can do about a live site. might have to wait a bit for the domain name to clear however.

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,
    Well it is good that it is only not displaying correctly in IE, because there are things called IF IE hacks out there that help you align things that are out of wack in IE.

    You basically put a separate CSS statements on each page that is not displaying right, and above it put IF IE, and if the internet browser is detected as IE, then it will use the CSS on the page instead of loading the external file.

    Below are a couple links that might help you out a little bit.

    http://www.quirksmode.org/css/condcom.html
    http://cavemonkey50.com/2005/12/the-...ie-hack-guide/

  6. #6
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ShawnsITSolution View Post
    Hello,
    Well it is good that it is only not displaying correctly in IE, because there are things called IF IE hacks out there that help you align things that are out of wack in IE.

    You basically put a separate CSS statements on each page that is not displaying right, and above it put IF IE, and if the internet browser is detected as IE, then it will use the CSS on the page instead of loading the external file.

    Below are a couple links that might help you out a little bit.

    http://www.quirksmode.org/css/condcom.html
    http://cavemonkey50.com/2005/12/the-...ie-hack-guide/
    dude. that worked perfectly. thanks to this i could play around and fix the code in my IE style sheet while not touching the firefox/safari settings. (there were some errors there as well, so i fixed them also.)

    thank you!

  7. #7
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Usually it isn't a good idea to feed different values to different browsers, the best way is to have a solution which works in all at once - though I admit there are times you absolutely may need to, only 1&#37; of the time.

    Instead if you targeted specific issues one by one, maybe post them here, we could help you out with that.
    Cross browser css bugs

    Dan Schulz you will be missed

  8. #8
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey guys,
    took me a while to reply here since someone suggested i post my website up here. well i got it up here:

    www.timyuenportfolio.com

    the problem here is the image gallery that i'm using. the thumbnails are lining up completely different in internet explorer vs firefox. ideally, i'm thinking i'd like the thumbnails maybe above the images, or maybe to the right?

    also, in my opinion, there's too much white in the page. i was thinking if i could maybe add borders/drop shadow to the page? sort of like this at
    www.vitaminliving.com. if anyone had any advice on how to fix these issues, id appreciate it. thank you!

    i've included the style sheet for the gallery.

    Code:
    .galleria{list-style:none;width:700px}
    .galleria li{display:block;width:80px;height:100px;overflow:hidden;float:right;margin:0 10px 10px 0}
    .galleria li a{display:none}
    .galleria li div{position:absolute;display:none;top:0;left:180px}
    .galleria li div img{cursor:pointer}
    .galleria li.active div img,.galleria li.active div{display:block}
    .galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
    .galleria li .caption{display:block;padding-top:.5em}
    * html .galleria li div span{width:400px} /* MSIE bug */


Bookmarks

Posting Permissions

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