HTML and CSS RSS HTML and CSS RSS

Need help getting design to be cross browser

Reply

•
•
Join Date: May 2004
Posts: 1,478
Reputation: mikeandike22 is an unknown quantity at this point 
Solved Threads: 18
mikeandike22's Avatar
mikeandike22 mikeandike22 is offline Offline
Nearly a Posting Virtuoso

Need help getting design to be cross browser

 
0
  #1
Mar 19th, 2008
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?
My Daniweb Blog: This,That, and Everything Else (Blog contest winner)

GetFirefox!
GetOpera!
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2008
Posts: 154
Reputation: Suomedia is an unknown quantity at this point 
Solved Threads: 19
Suomedia Suomedia is offline Offline
Junior Poster

Re: Need help getting design to be cross browser

 
0
  #2
Mar 19th, 2008
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
If you want your dreams to come true, the first thing you must do is to wake up....
Suomedia - Dynamic Content Management
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2008
Posts: 73
Reputation: lio04 is an unknown quantity at this point 
Solved Threads: 4
lio04's Avatar
lio04 lio04 is offline Offline
Junior Poster in Training

Re: Need help getting design to be cross browser

 
0
  #3
Mar 20th, 2008
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]-->>
Jabber: lio(at)jabbim(dot)sk
Sorry for my English, I am only an autodidact.
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2008
Posts: 154
Reputation: Suomedia is an unknown quantity at this point 
Solved Threads: 19
Suomedia Suomedia is offline Offline
Junior Poster

Re: Need help getting design to be cross browser

 
0
  #4
Mar 20th, 2008
•
•
•
•
Originally Posted by lio04 View Post
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
If you want your dreams to come true, the first thing you must do is to wake up....
Suomedia - Dynamic Content Management
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2007
Posts: 596
Reputation: buddylee17 has a spectacular aura about buddylee17 has a spectacular aura about 
Solved Threads: 125
buddylee17's Avatar
buddylee17 buddylee17 is offline Offline
Posting Pro

Re: Need help getting design to be cross browser

 
0
  #5
Mar 21st, 2008
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,203
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 164
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: Need help getting design to be cross browser

 
0
  #6
Mar 22nd, 2008
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
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC