943,718 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Need help getting design to be cross browser
Ad:
Permalink
Mar 19th, 2008
0

Need help getting design to be cross browser

Expand Post »
Basically I coded this site and it looks exactly how I want it too in Firefox but it looks like shit in IE more specifically IE 6, 7 isnt bad. The font is rendering odd and items are not in the same location.

here is my html file
HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.    <title>Caffeinated Customs</title>
  6.    <style type="text/css">
  7.     <!--
  8. 	 @import url(print.css) print;
  9. 	-->
  10.    </style>
  11.    <link rel="stylesheet" href="main.css" type="text/css" />
  12.    <!--[if IE]>
  14.     <style type="text/css">
  15.      h1{margin-left:0;}
  16.      #header{margin-top:10px;margin-left:50px;width:550px;}
  17.      .title{top:15px;)
  18.      .nav{margin-top:35px;}
  19.     </style>
  20.    <![endif]-->
  21.   </head>
  22.   <body>
  23.    <!--Wrap-->
  24.    <div id="wrapper">
  25.  
  26.     <div id="header"><!--head-->
  27.      <div class="title">
  28.       <h1>Caffeinated Customs</h1>
  29.       <h2>Custom Affordable Web Design</h2>
  30.      </div>
  31.  
  32.      <div class="nav">
  33.       <ul>
  34.        <li><a href="#">About</a></li>
  35.        <li><a href="#">Services</a></li>
  36.        <li><a href="#">Porfolio</a></li>
  37.        <li><a href="#">Contact Us</a></li>
  38.       </ul>
  39.      </div>
  40.     </div><!--/head-->
  41.  
  42.     <div id="contentw"><!--contentw-->
  43.      <h3>ABOUT</h3>
  44.      <div id="content">
  45.       <h4>About <span style="font-family:'Times New Roman', Times, serif;font-style:italic;font-weight:600;">Caffeinated Customs</span></h4>
  46.       <p>Content</p>
  47.      </div>
  48.     </div><!--/contentw-->
  49.  
  50.    </div><!--/Wrap-->
  51.   </body>
  52.  </html>

and My CSS file
HTML and CSS Syntax (Toggle Plain Text)
  1. /* CSS Document */
  2. 	 body{
  3. 	  background:#f0c690 url(cc_bg.jpg) repeat-x;
  4. 	 }
  5. 	 h1{
  6. 	  font-family:"Times New Roman", Times, serif;
  7. 	  font-style:italic;
  8. 	  color:#452401;
  9. 	  font-size:37.41px;
  10. 	  font-weight:300;
  11. 	  letter-spacing:-3px;
  12. 	  margin-left:-10px;
  13. 	 }
  14. 	 h2{
  15. 	  font-family:"Times New Roman", Times, serif;
  16. 	  font-style:italic;
  17. 	  color:#000;
  18. 	  font-size:18.71px;
  19. 	  letter-spacing:0px;
  20. 	  font-weight:600;
  21. 	  margin-top:-25px;
  22. 	 }
  23. 	 h3{
  24. 	  font-family:Arial, Helvetica, sans-serif;
  25. 	  font-size:24px;
  26. 	  font-weight:400;
  27. 	  color:#452401;
  28. 	  }
  29. 	 #header{
  30. 	  width:500px;
  31. 	  background:url(cc_nav.gif) left top no-repeat;
  32. 	  position:fixed;
  33. 	  left:50px;
  34. 	  top:50px;
  35. 	 }
  36. 	 .title{
  37. 	  position:relative;
  38. 	  left:-20px;
  39. 	  top:-15px;
  40. 	 }
  41. 	 .nav{
  42. 	  width:214px;
  43. 	  height:200px;
  44. 	  background-color:#dfb782;
  45. 	  margin-left:32px;
  46. 	  border:1px solid #e5bf8c;
  47. 	  border-top:0;
  48. 	 }
  49. 	 .nav li{
  50. 	  list-style-type:none;
  51. 	  padding: 2px 0 2px 0;
  52. 	  margin-left:-41px;
  53. 	 }
  54. 	 .nav li:hover{
  55. 	  display:block;
  56. 	  width:214px;
  57. 	  height:28px;
  58. 	  border:1px solid #f2c390;
  59. 	  background-color:#c89660;
  60. 	 }
  61. 	 .nav li a{
  62. 	  color:#452401;
  63. 	  font-family:Arial, Helvetica, sans-serif;
  64. 	  font-style:italic;
  65. 	  font-size:24px;
  66. 	  text-decoration:none;
  67. 	  padding-left:41px;
  68. 	 }
  69. 	 #contentw{
  70. 	  width:800px;
  71. 	  height:auto;
  72. 	  position:absolute;
  73. 	  left:450px;
  74. 	  top:75px;
  75. 	 }
  76. 	 #content{
  77. 	  font-family:Arial, Helvetica, sans-serif;
  78. 	  border-top:#c89660 4px solid;
  79. 	  margin-top:-10px;
  80. 	  margin-left:10px;
  81. 	 }
  82. 	 #content h4{
  83. 	  font-size:24px;
  84. 	  color:#bf9867;
  85. 	  margin-top:3px;
  86. 	 }
  87. 	 #content p{
  88. 	  width:650px;
  89. 	  background-color:#dfb782;
  90. 	  padding:15px;
  91. 	  border:1px solid #e5bf8c;
  92. 	  margin-top:-10px;
  93. 	  font-size:14px;
  94. 	  font-weight:600;
  95. 	  line-height:20px;
  96. 	  font-family:Arial, Helvetica, sans-serif;
  97. 	  }

the dimensions of cc_nav.gif is 325x117
any insight?
Similar Threads
Reputation Points: 33
Solved Threads: 19
Nearly a Posting Virtuoso
mikeandike22 is offline Offline
1,496 posts
since May 2004
Permalink
Mar 19th, 2008
0

Re: Need help getting design to be cross browser

The fonts look ok to me in IE6 (look in Safari!!! ekk!). You can add a little margin (or anything else you want) where needed for IE6 like this:

HTML and CSS Syntax (Toggle Plain Text)
  1. 	 .nav{
  2. 	  width:214px;
  3. 	  height:200px;
  4. 	  background-color:#dfb782;
  5. 	  margin-left:32px;
  6. 	  border:1px solid #e5bf8c;
  7. 	  border-top:0;
  8. 	  _margin-top:40px;
  9. 	 }



Matti Ressler
Suomedia
Reputation Points: 15
Solved Threads: 19
Junior Poster
Suomedia is offline Offline
154 posts
since Mar 2008
Permalink
Mar 20th, 2008
0

Re: Need help getting design to be cross browser

But tags "_anything:" for IE are not valid. I would solve this problem with two css files, if is with one really impossible.
HTML and CSS Syntax (Toggle Plain Text)
  1. <!--[if IE6]>
  3. <style type="text/css">
  4. @import "styleie6.css";
  5. </style>
  6. <![endif]-->>
Reputation Points: 27
Solved Threads: 4
Junior Poster in Training
lio04 is offline Offline
73 posts
since Mar 2008
Permalink
Mar 20th, 2008
0

Re: Need help getting design to be cross browser

Click to Expand / Collapse  Quote originally posted by lio04 ...
But tags "_anything:" for IE are not valid.

So? They are completely ignored by other browsers and do not cause one little problem. While valid page structure is a grail worth pursuing, valid style sheets are not, not one little bit.


Matti Ressler
Suomedia
Reputation Points: 15
Solved Threads: 19
Junior Poster
Suomedia is offline Offline
154 posts
since Mar 2008
Permalink
Mar 21st, 2008
0

Re: Need help getting design to be cross browser

Have a look at this. It explains exactly why things look different depending on the browser and what you can do to make things look more cross browser consistent.
Reputation Points: 232
Solved Threads: 137
Practically a Master Poster
buddylee17 is offline Offline
665 posts
since Nov 2007
Permalink
Mar 22nd, 2008
0

Re: Need help getting design to be cross browser

I see you have size styles (width, height) and surrounding styles (margin, border, padding) in the same classes and tags.

If you want cross-browser compatibility, do not do this. Make separate nested tags for each kind.

FF puts the surrounding styles OUTSIDE the defined sizes. IE crams them INSIDE.
Last edited by MidiMagic; Mar 22nd, 2008 at 12:35 am. Reason: missingspace
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: How to center site using xhtml and css using DW CS3
Next Thread in HTML and CSS Forum Timeline: Website loading Problem





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC