5 replies [Last post]
csanders984
Offline
newbie
Chicago, IL
Last seen: 3 years 2 weeks ago
Chicago, IL
Timezone: GMT-5
Joined: 2011-03-28
Posts: 3
Points: 4

Here's a site I coded using CSS: http://blackmatchmade.com/

It looks great in every browser I've tried: IE9, Safari, Fire fox, Chrome.

But then I check it in IE 8 and it just looks terrible. The navigation bar is crummy, the style in the navigatiion bar is thicker than designed, the wording clumps together on the home page and the wording on the "our firm page cascades terribly.

I'm not even sure what I did wrong to offend IE 8 so much!

Css:

/* layoutstyles.css */
 
 
/* Universal style rule */
*{
  /* Block all browser default margins and padding */
  margin:0;
  padding:0;
  /* Temporary borders */
 order:dashed 1px #00FF00;
}
 
#wrapper{
 
 
}
 
 
 
#wrapper2{
width: 980px ;/*was 60em (don't mix px and em widths)*/
background-color: #FFFFFF;
border-top: thick double #333333;
border-bottom:thick solid #000000;
border-left:thick solid #999999;
border-right:thick solid #999999;
/* Center the wrapper */
margin:0 auto;
/*has top go into top of browser*/
margin-top: 30px;
/*creates Gap at bottom*/
margin-bottom: 100px;
overflow:hidden;/*contain inner floats*/
 
}
 
 
 
body{
font-family:Arial, Helvetica, sans-serif; 
 
}
 
 
.content{
margin:0 auto;
background-color: #990099;
background: url(Images/adventurebosx_webrose.png);
border-top:thick solid #000000;
border-bottom:thick solid #000000;
}
 
.content,p{
font-size:16px;
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
padding-right:20px;
padding-left:10px;
margin-bottom:5px;
padding-left: 60px;
text-align:center;
padding-top:40px;
padding-bottom:90px;
color: #FFFFFF;
}
 
 
.contentblue{
margin:0 auto;
background-color: #990099;
background: url(Images/adventurebosx_webrose.png);
 
}
 
.contentblue,p{
 
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
padding-right:20px;
padding-left:10px;
margin-bottom:5px;
padding-left: 60px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
color: #FFFFFF;
}
 
 
.contentrose{
margin:0 auto;
background-color: #990099;
background: url(Images/adventurebosx_webrose.png);
border-top:thick solid #000000;
 
}
 
.contentrose,p{
 
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
padding-right:20px;
padding-left:10px;
margin-bottom:5px;
padding-left: 60px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
color: #FFFFFF;
}
 
.contentrose li{
margin-left: 220px;
margin-bottom: 20px;
 
 
 
}
 
 
 
 
 
 
 
 
 
.contentgreen{
margin:0 auto;
background-color: #990099;
background: url(Images/adventurebosx_webrose.png);
border-top:thick solid #000000;
 
}
 
.contentgreen,p{
 
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
padding-right:20px;
padding-left:10px;
margin-bottom:5px;
padding-left: 60px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
color: #FFFFFF;
}
 
.contentgreen li{
margin-left: 220px;
margin-bottom: 20px;
 
 
 
}
 
 
 
 
 
.contentgold{
margin:0 auto;
background-color: #990099;
background: url(Images/adventurebosx_webrose.png);
border-top:thick solid #000000;
 
}
 
.contentgold,p{
 
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
padding-right:20px;
padding-left:10px;
margin-bottom:5px;
padding-left: 60px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
color: #FFFFFF;
}
 
.contentgold li{
margin-left: 220px;
margin-bottom: 20px;
 
 
 
}
 
 
 
 
 
 
 
.contentgu{
margin:0 auto;
background-color: #990099;
background: url(Images/adventurebosx_webrose.png);
border-top:thick solid #000000;
border-bottom:thick solid #000000;
}
 
.contentgu,p{
 
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
padding-right:20px;
padding-left:10px;
margin-bottom:5px;
padding-left: 60px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
color: #FFFFFF;
}
 
.contentgu li{
margin-left: 220px;
margin-bottom: 20px;
 
 
 
}
 
 
 
 
.contentz{
margin:0 auto;
background-color: #990099;
background: url(Images/adventurebosx_webrose.png);
border-top:thick solid #000000;
border-bottom:thick solid #000000;
}
 
.contentz,p{
 
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
padding-right:20px;
padding-left:10px;
margin-bottom:5px;
padding-left: 60px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
color: #FFFFFF;
}
 
.contentz li{
margin-left: 220px;
margin-bottom: 20px;
 
 
 
}
 
 
 
 
 
 
 
.pushred{
padding-top: 30px;
padding-top: 20px;
margin-bottom: 20px;
 
}
 
.pushred ul{
padding-right: 20px;
padding-left: 20px;
text-align:left;
list-style:none;
display:block;
background-color:;
border:thin dashed #FFFFFF;
padding-bottom: 10px;
 
 
}
 
 
 
.pushred li{
font-size:18px;
display:block;
padding-left: 380px;
 
}
 
 
 
 
 
.push{
border:dashed thin #FFFFFF;
padding-top: 30px;
padding-top: 20px;
margin-bottom: 20px;
 
}
 
 
.push ul{
padding-right: 20px;
padding-left: 20px;
text-align:left;
list-style:none;
display:block;
background-color:;
border:thin dashed #FFFFFF;
padding-bottom: 10px;
 
 
}
 
 
 
.push li{
font-size:18px;
display:block;
padding-left: 380px;
 
}
 
 
 
 
 
 
.pushy{
 
padding-left:;
 
border:thin dashed #FFFFFF;
 
 
}
 
 
.pushy ul{
list-style: square; 
padding-right: 20px;
padding-left: 200px;
text-align:left;
list-style:none;
margin-left: 40px;
margin-rght: 20px;
}
 
 
 
.pushy li{
font-size:20px;
display:block;
 
 
}
 
.pushd{
 
padding-left:;
 
border:thin dashed #FFFFFF;
padding-bottom: 20px;
 
 
}
 
 
.pushd ul{
list-style: square; 
padding-right: 10px;
padding-left: 200px;
text-align:left;
list-style:none;
margin-left: 40px;
margin-rght: 20px;
}
 
 
.pushd li{
font-size:20px;
display:block;
 
}
 
.pushg{
 
padding-left:;
background: url(Images/stopwatch2.png) no-repeat top left;
 
border:thin dashed #FFFFFF;
 
 
}
 
 
.pushg ul{
list-style: square; 
padding-right: 20px;
padding-left: 210px;
text-align:left;
list-style:none;
}
 
.pushg li{
font-size:20px;
display:block;
color: #FFFFFF;
}
 
 
.pushc{
 
padding-left:;
 
border:thin dashed #FFFFFF;
 
}
 
 
.pushc ul{
list-style: square; 
padding-right: 20px;
padding-left: 270px;
text-align:left;
list-style:none;
}
 
 
 
.pushc li{
font-size:20px;
display:block;
 
}
 
 
 
 
 
.pushgu{
 
padding-left:;
 
border:thin dashed #FFFFFF;
 
 
}
 
 
.pushgu ul{
list-style: square; 
padding-right: 20px;
padding-left: 270px;
text-align:left;
list-style:none;
}
 
 
 
.pushgu li{
font-size:20px;
display:block;
 
}
 
 
 
 
 
 
.pushz{
 
padding-left:;
background:url(Images/code2.png) no-repeat left;
border:thin dashed  #000000;
 
}
 
 
.pushz ul{
list-style: square; 
padding-right: 20px;
padding-left: 270px;
text-align:left;
list-style:none;
}
 
 
 
.pushz li{
font-size:20px;
display:block;
 
}
 
 
 
 
#logo{
margin-left:720px;
padding-bottom: 20px;
padding-top: 20px;
 
}
 
#blackmatch{
}
 
 
 
#blackmatch img{
float:left;
margin-top:20px;
background-color:#FFFFFF;
border: thick black solid;
border-bottom:none;
margin-right: 5px;
 
 
}
 
#blackmatched{
 
 
}
 
 
 
#blackmatched img{
border:thick solid #000000;
float:left;
margin-top:30px;
}
 
.jas{
float: left;
margin-right: 280px;
padding-left: 30px;
color:#000000;
 
 
}
 
 
.style1 {
font-size: 50px;
font-weight: bold;
font-style: italic;
color: #000000;
}
 
.style2 {
color: #CC99FF;
font-size:24px;
padding-left: 400px;
}
 
 
 
 
h1{
text-align:right;
color: #FFFFFF;
padding-bottom: 10px;
font-style:italic;
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
padding-right:150px;
margin-top:10px;
display:block;
 
}
 
h2{
 
color: #FFFFFF;
font-style:italic;
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
padding-right:50px;
padding-left:170px;
margin-top:10px;
text-align:;
display:block;
font-size:26px;
width: 670px;
height:auto;
 
border:thin dashed #FFFFFF;
 
 
}
 
 
.style4 {
color: #000000;
font-weight: bold;
font-size:23px;
    display:block;
padding-left: 300px;
 
}
 
 
 
.once {
font-size: 13px;
color: #FFFFFF;
display:block;
width: 390px;
height: 160px;
margin-left: 470px;
margin-right: 470px;
border:thin dotted #000000;
background: #000000;
padding-right: 33px;
}
 
 
 
 
 
 
#center{
font-size:15px;
color: #000000;
font-style:italic;
background-color:#000000;
color:#FFFFFF;
display:block;
padding-top: 50px;
padding-left: 20px;
}
 
 
.bottom{
margin-top: 40px;
 
 
}
.bottom p{
padding: 2px;
font-size:18px;
color:#000000;
}
 
 
 
.bot{
font-size:12px;
padding: 2px;
color:#000000;
}
 
.logo2{
text-align:center;
 
margin-bottom: 30px;
margin-top: 50px;
 
}
 
 
#navbar{
background-color:#000000;
height:30px;
}
 
 
#navbar ul{
list-style-type: none;
 
}
 
#navbar li{
float: left;
 
}
 
 
 
 
 
 
#bnavbar{
background-color:#000000;
height:30px;
text-decoration:none;
list-style-type:none;
}
 
 
b#navbar ul{
list-style-type: none;
text-decoration:none;
 
}
 
#bnavbar li{
float: left;
text-decoration:none;
list-style-type:none;
 
}
 
#bnavbar a,
#bnavbar a:link,
#bnavbar a:visited{
text-decoration:none;
list-style-type:none;
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
padding-top:12px;
display:block;
width: 138px;
text-align:center;
}
 
 
#bnavbar a:hover,
#bnavbar a:active{
background-color: #FFFFFF;
color: #666666;
 
}
 
 
#navbar{
background-color:#000000;
height:30px;
background:url(Images/adventurebosx_web_scrollbar.gif) right top;
}
 
 
#navbar ul{
list-style-type: none;
 
}
 
#navbar li{
float: left;
 
}
 
 
.form{
 
float:left;
border:thick solid #000000;
margin-top: 30px;
margin-left: 10px;
background: ;
color:black;
 
}
 
.formf{
 
float:left;
border:thick solid #000000;
margin-top: 5px;
margin-left: 10px;
 
background: ;
color:black;
 
}
 
 
#navbar a,
#navbar a:link,
#navbar a:visited{
text-decoration:none;
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
padding-top:12px;
display:block;
width: 137px;
border:thin dotted #000000;
text-align:center;
 
}
 
 
#navbar a:hover,
#navbar a:active{
background-color: #FFFFFF;
color: #666666;
 
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<link href="blackmatchmain.css" rel="stylesheet" type="text/css"/>
 
 
 
<title>Black Matchmade, Chicago’s Elite Matchmaking Firm dedicated to helping black professionals and singles find their soul mate</title>
 
<style type="text/css">
<!--
body {
	background-image: url(Images/backgroundo.png);
	background-color: #999999;
	background-repeat: no-repeat;
}
.style5 {font-size: 21px;
display:block;
 
width: 360px;
height: 60px;
padding: 2px;
margin-left:450px;
text-align:center;
 
}
.style6 {font-size: 25px;
padding-bottom: 35px;
 
}
.style7 {font-size: 18px}
.style8 {color: #000000}
a:link {
	color: #CC99FF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #000000;
}
a:active {
	text-decoration: none;
}
 
 
-->
 
</style>
 
<div id="wrapper">
 
<div id="wrapper2">
<body>
 
<div id="logo">
<img src="Images/blackmatchmade_smallerlogo.png" alt="logo" width="185" height="149"></div>
 
<div id="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="ourfirm/index.html">Our Firm</a></li>
<li><a href="men/index.html">Men</a></li>
<li><a href="Women/index.html">Women</a></li>
<li><a href="join/index.html">Join Our Database</a></li>
 
<li><a href="speeddating/index.html">Speed Dating</a></li>
<li><a href="events/index.html">Events</a></li>
</ul>
 
 
</div>
 
<div class="content">
 
 
 
<div id="blackmatch">      <img src="Images/models_blackmatchmde_laughter.png" alt="models" width="371" height="668"> </div>
<p class="style1 style6">Are You Ready To Meet Your Soul Mate?</p>
 
<div class="push">  
<p class="style5">At Black Match Made, we use our unique approach to make finding your love personal,
  comfortable, and confidential.</p><br/>
<p class="style5">We know you’re serious about finding your mate, let us handle the rest.</p>
</div>
 
<p class="style1 style6">After all…your future awaits…</p>
<p class="style2 style7"><a href="register/index.html" target="_parent">[continue to join our database]</a></p>
 
</div>
 
</body>
 
 
</div>
 
 
 
 
</div>
 
</html>

CupidsToejam
CupidsToejam's picture
Offline
Guru
Waco, TX
Last seen: 2 years 12 weeks ago
Waco, TX
Timezone: GMT-6
Joined: 2008-08-15
Posts: 2634
Points: 1552

looks the same in my FF and

looks the same in my FF and IE8. You should validate your code.


First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

csanders984
Offline
newbie
Chicago, IL
Last seen: 3 years 2 weeks ago
Chicago, IL
Timezone: GMT-5
Joined: 2011-03-28
Posts: 3
Points: 4

What do you mean looks the

What do you mean looks the same ? Like it looks destroyed?

I validated the code, the only thing wrong was I used id as opposed to class for two of the selectors, it shouldn't be doing this.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Waco, TX
Last seen: 2 years 12 weeks ago
Waco, TX
Timezone: GMT-6
Joined: 2008-08-15
Posts: 2634
Points: 1552

The site looks the same in my

The site looks the same in my FF and IE8. no differences.

Validate your code!!
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fblackmatchmade.com%2F


First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

csanders984
Offline
newbie
Chicago, IL
Last seen: 3 years 2 weeks ago
Chicago, IL
Timezone: GMT-5
Joined: 2011-03-28
Posts: 3
Points: 4

Sorry but let me try this

Sorry but let me try this again. My CODE IS VALIDATED. Some of those don't make sense and are flagging because I'm using Dreamweaver CS3 and if I make some of those changes it destroys the visual of my site. I've since updated my doctype to HTML5, but some of the changes it's asking for are not syncing with my version of Dreamweaver CS3.

(for example no longer closing certain tags with ">" ... my dreamwever still needs me to do this or the site will not display at all, while it is not needed for HTML5.

None of those invalidations however don't explain my issues. My navigation bar for example, will not hold shape on certain browsers and the wording is behaving strangely on the" Our Firm" page.

Rest assured my code is validated, please answer my question and don't worry about the validation as you see it.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 7 hours 56 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Hi csanders984, One of your

Hi csanders984,
One of your problem is that you are missing the opening body tag, it gets closed but is never opened.
Try adding the body like this:

</style>
<body>
<div id="wrapper">

Dreamweaver should have done that for you.

Then make sure all the other opening and closing tags match up.
And validate the CSS.