Client Side Things
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Codewalkers Forums > Other Technologies > Client Side Things
Reload this Page

CSS && FF && IE

Discuss CSS && FF && IE in the Client Side Things forum on Codewalkers.
CSS && FF && IE Here is a place to talk and ask questions about HTML, CSS, Javascript, and other client side technologies.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Codewalkers Forums Sponsor:
  #1  
Old December 26th, 2005, 02:58 AM
lig's Avatar
lig lig is offline
"Forum Nazi"
Codewalkers Demi-God (4500 - 4999 posts)
  
Join Date: Apr 2007
Location: Jacksonville, Fl
Posts: 4,729 lig User rank is Private First Class (20 - 50 Reputation Level)lig User rank is Private First Class (20 - 50 Reputation Level) 
Time spent in forums: 4 Days 1 h 32 m 7 sec
Reputation Power: 6
CSS && FF && IE
OK - I'm a developer chick not design - only CSS I do is copy and paste with a little hacking to "customize" it a bit. Any help/links/pointers/suggestions would be greatly apprieciated.

PROBLEM: Of course I am having problems getting Firefox and IE to display something reletively similar. The problem is somewhere in how the 2 display the bodyblock tags and it's subtags (nav, cont-out, and cont).

It of course displays perfectly fine in FF -


But not in IE -


K - first the CSS:
CSS stylesheet
php Code:
Original - php Code 
  1.  
  2.  
  3. /* My sad little attempt at a style sheet */ 
  4.  
  5. /* General layout */
  6. body {
  7.  margin:0px;
  8.  background: silver url(bg.jpg) repeat;
  9.  color: #000000;
  10.  text-align:center;
  11.  padding:0;
  12.  }
  13.  
  14. /* Outer block */
  15. #outer {
  16.  text-align:left;
  17.  border:1px solid #2B6B00;
  18.  width:600px;
  19.  margin:auto;
  20.  background: #3A9001;
  21.  padding: 2px;
  22.  }
  23.  
  24. /* header layout */
  25. #hdr {
  26.  height:100px;
  27.  background:#ffffff;
  28.  color: #333333;
  29.  }
  30.  
  31. /* pretty picture right under header */
  32. #img {
  33.  height:150px;
  34.  background:#c0c0c0;
  35.  color: #333333;
  36.  border:solid #2B6B00;  
  37.  border-width:1px 0 1px 0;
  38.  }
  39.  
  40. /* body */
  41. #bodyblock {
  42.  position:relative;
  43.  background: #3A9001;
  44.  color: #333333;
  45.  width:600px;
  46.  }
  47.  
  48. /* navigation bar */
  49. #nav {
  50.  float:left;
  51.  background:#3A9001;
  52.  color: #333333;
  53.  width:118px;
  54.  border:solid #2B6B00;
  55.  border-width:0 1px 0 0;
  56.  }
  57.  
  58. /* content wrapper - get a little breathing space */
  59. #cont-out {
  60.  width:480px;
  61.  background:#ffffff;
  62.  margin: 0 0 0 2ex;
  63.  border:solid #2B6B00;
  64.  border-width:1px 1px 1px 1px;
  65. }
  66.  
  67. /* Actual Content */
  68. #cont {
  69.  width:460px;
  70.  color: navy;
  71.  text-align: left;
  72.  }
  73.  
  74. /* Pretty Copyright stuff */
  75. #ftr {
  76.  height:25px;
  77.  background:#c0c0c0;
  78.  color: #333333;
  79.  border:solid #2B6B00;
  80.  border-width:1px 1px 1px 1px;
  81.  margin:0;
  82.  }


Next HTML:
php Code:
Original - php Code 
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <head>
  6. <title></title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <link rel="stylesheet" type="text/css" href="simple.css" />
  9. </head>
  10. <body>
  11. <div id="outer">
  12.     <div id="hdr" align="center"><img src="web_header.gif" alt="Guam International Country Club" /></div>
  13.     <div id="img"><img src="banner1.gif" alt="Image from Course"></div>
  14.     <div id="bodyblock" align="right">
  15.         <div id="nav" align="center">
  16.             <h4 align="center"><font color="navy">Menu</font></h4>
  17.             <a href="#">Golf Course</a><br />
  18.             <a href="#">1st Floor</a><br />
  19.             <a href="#">2nd Floor</a><br />
  20.             <a href="#">Starter</a><br />
  21.         </div>
  22.         <!--
  23.         <img src="lcorner.gif" align="left" style="margin:0; position:reletive; top:2px">
  24.         <img src="rcorner.gif" align="right" style="margin:0;">
  25.         -->
  26.         <div id="cont-out">
  27.             <div id="cont">
  28.             <h3 align="center">Content</h3>
  29.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
  30.             ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
  31.             laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
  32.             voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
  33.             cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  34.  
  35.             <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque 
  36.             laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
  37.             architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit 
  38.             aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione 
  39.             voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
  40.             consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et 
  41.             dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum 
  42.             exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
  43.             consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil 
  44.             molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  45.  
  46.             <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium 
  47.             voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 
  48.             cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id 
  49.             est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam 
  50.             libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod 
  51.             maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. 
  52.             Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut 
  53.             et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a 
  54.             sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis 
  55.             doloribus asperiores repellat.</p>
  56.             </div>
  57.         </div>
  58.     </div>
  59.     <div id="ftr" align="center">Copyright (c) Guam International Country Club 2003</div>
  60. </div>
  61.  
  62. </body>
  63. </html>
Reply With Quote
  #2  
Old December 27th, 2005, 11:57 AM
bakertrg's Avatar
bakertrg bakertrg is offline
Contributing User
Codewalkers Regular (2000 - 2499 posts)
  
Join Date: Apr 2007
Location: Scottsdale AZ, US
Posts: 2,253 bakertrg User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 48 m 45 sec
Reputation Power: 4
Send a message via Yahoo to bakertrg
RE: CSS && FF && IE
I'm not sure why this isn't working in both I think maybe if you posted on a more client side focus'd forum you might be better off. Have you ever looked at www.csszengarden.com? Links to lots of css guru's blog's and websites from there.
Reply With Quote
  #3  
Old December 27th, 2005, 08:53 PM
lig's Avatar
lig lig is offline
"Forum Nazi"
Codewalkers Demi-God (4500 - 4999 posts)
  
Join Date: Apr 2007
Location: Jacksonville, Fl
Posts: 4,729 lig User rank is Private First Class (20 - 50 Reputation Level)lig User rank is Private First Class (20 - 50 Reputation Level) 
Time spent in forums: 4 Days 1 h 32 m 7 sec
Reputation Power: 6
RE: CSS && FF && IE
Yeah - I go there for some inspiration and just to drool. Thanks.
Reply With Quote
  #4  
Old December 28th, 2005, 03:48 PM
bakertrg's Avatar
bakertrg bakertrg is offline
Contributing User
Codewalkers Regular (2000 - 2499 posts)
  
Join Date: Apr 2007
Location: Scottsdale AZ, US
Posts: 2,253 bakertrg User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 48 m 45 sec
Reputation Power: 4
Send a message via Yahoo to bakertrg
RE: CSS && FF && IE
lol yes some serious designers on that site, I've been tempted to make a submission myself but it's a little bit of a learning curve to go completely CSS and i already have enough projects. I guess eventually i'll have to head that way as table free design is definately the "wave of the future" but I'm an old dog and I resist learning new stuff for as long as possible. I guess my next learning curve is to jump inot OOP in php but every time I look at someones solution with classes I always think I could have done that in half the code.

some new ones I really like:
http://www.csszengarden.com/?cssfile=177/177.css
http://www.csszengarden.com/?cssfile=174/174.css

my all time favorite:
http://www.csszengarden.com/?cssfile=106/106.css
Reply With Quote
  #5  
Old December 28th, 2005, 09:44 PM
lig's Avatar
lig lig is offline
"Forum Nazi"
Codewalkers Demi-God (4500 - 4999 posts)
  
Join Date: Apr 2007
Location: Jacksonville, Fl
Posts: 4,729 lig User rank is Private First Class (20 - 50 Reputation Level)lig User rank is Private First Class (20 - 50 Reputation Level) 
Time spent in forums: 4 Days 1 h 32 m 7 sec
Reputation Power: 6
RE: CSS && FF && IE
Design is one of those things that I will eventually learn - or should say am slowly learning as I need it. Have a number of friends pushing me to learn tableless from the get go - since my design skills are so miniscule to begin with ;). But hey, I learned HTML from a book because I was bored - now at least someone pays me to learn it so I can do it.

Really like the skyline one. Only turn off was the clouds that stayed in position. To me it was distracting. Would have prefered them to stay in the banner. Liked the color combination and simplicity of the second one... was doing rounded corners originally for mine - but of course I couldn't get the IE to render it correctly (FF of course was easy).

Yout favorite is sweet! Love how they so seamlessly matched the background color to the floor and used the images nicely contrasting colors as the palette. And the bottom graphic is awesome - matching so well to the top image.

I personally don't have a favorite - but I do have quite a few that I think are just so Cool.

The Mozart one - Love the cut out to the sheet music below. Just love the look and feel of the 45 RPM CSS. The Pin up one is just plain old fun. Love the original artwork on Subway Dream . And wonder if C-Note could get someone arrested.
Reply With Quote
  #6  
Old December 29th, 2005, 04:48 AM
bakertrg's Avatar
bakertrg bakertrg is offline
Contributing User
Codewalkers Regular (2000 - 2499 posts)
  
Join Date: Apr 2007
Location: Scottsdale AZ, US
Posts: 2,253 bakertrg User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 48 m 45 sec
Reputation Power: 4
Send a message via Yahoo to bakertrg
RE: CSS && FF && IE
I didn't know what you were talking about with the clouds, I just went and looked in firefox and I don't like that at all, it's much better looking in IE lol.

I keep telling myself I'm gonna learn the rounded corners CSS one of these days so I can stop making inner table graphic's.
Reply With Quote
  #7  
Old December 29th, 2005, 05:51 AM
lig's Avatar
lig lig is offline
"Forum Nazi"
Codewalkers Demi-God (4500 - 4999 posts)
  
Join Date: Apr 2007
Location: Jacksonville, Fl
Posts: 4,729 lig User rank is Private First Class (20 - 50 Reputation Level)lig User rank is Private First Class (20 - 50 Reputation Level) 
Time spent in forums: 4 Days 1 h 32 m 7 sec
Reputation Power: 6
RE: CSS && FF && IE
Found the solution - needed to reduce the size of cont-out - give it a little more buffer space. I assume there was some overlap (with the borders and what not) so IE was moving it down.

hehe - I even made pretty buttons. I'll post a link when it is up and working.
Reply With Quote
Reply

Viewing: Codewalkers Forums > Other Technologies > Client Side Things > CSS && FF && IE

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread: