...

View Full Version : Internet Explorer Format Help



shinydarkrai94
04-15-2011, 09:52 PM
I'm building a website and it seems to work well in Chrome and Firefox but when it comes to IE (programmer's bane), it doesn't work. It seems that whenever I try to position something in IE, it always goes below the "list" of images that I have. Here's my html code for the contact page (note: I haven't done any of the meta tags or anything -- I'm going to do that later when I get it online. For now it's just the basic code):



<html>

<head>

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

</head>

<body>

<ul id="stoplight">
<li id="stoplight1"><a href="Index.html"></a></li>
<li id="stoplight2"><a href="AboutUs.html"></a></li>
<li id="stoplight3"><a href="ContactUs.html"></a></li>
</ul>


<div id="stoplightbottom">
<img src="stoplightbottom.png"/>
</div>

<div id="smartboard">
<img src="smartboard.png"/>
</div>

<div id="specials">
<img src="specials.png"/>
</div>

<div id="avsign">
<img src="AVAvenueLeftSign.png" />
</div>

<div id="states">
<img src="states.png" />
</div>

<div id="contractorstext">
<span class="blackfont1">Technology Systems Contractors Power Limited Technicians</span>
</div>


<div id="company1">
<img src="company1.png" height="30" width="100">
</div>

<div id="company2">
<img src="company2.png" height="30" width="100">
</div>

<div id="company3">
<img src="company3.png" height="30" width="100">
</div>

<div id="company4">
<img src="company4.png" height="30" width="100">
</div>

<div id="company5">
<img src="company5.png" height="30" width="100">
</div>


<div id="contactimage">
<img src="contactimage.png" width="650" height="450">
</div>

<div id="contactinfo">
<img src="contactinfo.png" width="650" height="450">
</div>



</body>

</html>


And here's my CSS (most of it refers to other pages):



html, body, div, span,object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strike, strong, sub, sup, tt, var, b, i, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
textarea { overflow:auto; }




ul#stoplight {

margin: 0 840;
width:0px;
height:0px;
list-style:none;

}

ul#stoplight li {

display:inline;

}

ul#stoplight li a {

float:left;
text-indent:-9999px;
text-decoration:none;


}

ul#stoplight li#stoplight1 a {

width:178px;
height:82px;
background:url(sprites.png) no-repeat 0 0;

}

ul#stoplight li#stoplight1 a:hover {

background-position: -179px 0;

}

ul#stoplight li#stoplight2 a {

width:179px;
height:63px;
background:url(sprites.png) no-repeat 0 -82px;

}

ul#stoplight li#stoplight2 a:hover {

background-position: -359px -82px;

}

ul#stoplight li#stoplight3 a {

width:179px;
height:66px;
background:url(sprites.png) no-repeat 0 -145px;
}

ul#stoplight li#stoplight3 a:hover {

background-position: -538px -145px;
}


body {

background-image:url('GradientBackground.png');
background-repeat:no-repeat;
background-position:0px 0px;

}



.arial {font-family: Arial;}
.tahoma {font-family: Tahoma;}
.verdana {font-family: Verdana;}
.underline {text-decoration: underline}
.blackfont1 {font-size: 16px;}
.whitetext1 {color: #F2F2F2; font-size: 30px;}
.whitetext2 {color: #EBEBEB; font-size: 17px;}
.whitetext3 {color: #DBDBDB; font-size: 18px;}




#background {top: 2.7em; left: 4em; position:absolute; z-index: -2; visibility: show;}
#stoplightbottom {margin: 211 840; position: absolute; z-index: 1; visibility: show;}
#smartboard {margin: 230 970; position: absolute; z-index: 1; visibility: show;}
#specials {margin: 410 970; position: absolute; z-index: 1; visibility: show;}
#text2 {margin: 600 430; position: absolute; z-index: 1; visibility: show;}
#avsign {margin: -5 50; position: absolute; z-index: 1; visibility: show;}
#states {margin: 90 540; position: absolute; z-index: 1; visibility: show;}
#contractorstext {margin: 30 530; position: absolute; z-index: 1; visibility: show; width: 200;}
#company1 {margin: 220 200; position: absolute; z-index: 1; visibility: show;}
#company2 {margin: 220 300; position: absolute; z-index: 1; visibility: show;}
#company3 {margin: 220 400; position: absolute; z-index: 1; visibility: show;}
#company4 {margin: 220 500; position: absolute; z-index: 1; visibility: show;}
#company5 {margin: 220 600; position: absolute; z-index: 1; visibility: show;}


#contactinfo {margin: 270 170; position: absolute; z-index: 2; visibility: show;}
#contactimage {margin: 270 170; position: absolute; z-index: 1; visibility: show;}

#greenbackground {margin: 230 170; position: absolute; z-index: 1; visibility: show;}
#greybackground {margin: 230 170; position: absolute; z-index: 1; visibility: show;}

#aboutusheader {margin: 240 260; position: absolute; z-index: 2; visibility: show; width: 600;}
#aboutusparagraph {margin: 290 180; position: absolute; z-index: 2; visibility: show; width: 630;}

#list1 {margin: 400 190; position: absolute; z-index: 2; visibility: show; width: 200;}
#list2 {margin: 400 400; position: absolute; z-index: 2; visibility: show; width: 200;}
#list3 {margin: 400 610; position: absolute; z-index: 2; visibility: show; width: 200;}


It has this problem on every page, but I just listed the contact page for simplicity. Here's two screenshots of the problem:

Internet Explorer Screenshot: http://i986.photobucket.com/albums/ae349/shinydarkrai94/avavenueerror2.jpg

Chrome Screenshot: http://i986.photobucket.com/albums/ae349/shinydarkrai94/avavenueerror1.jpg

As you can see, it separates the top of the stoplight with the rest of the page. Can anyone help me fix this problem? Thanks in advance everyone :).

effpeetee
04-15-2011, 10:13 PM
It is a good idea to start your CSS with this piece of code.

*{margin:0;
padding:0;}

It will reset a browser before the main code is read.

Give it a try.

Frank

shinydarkrai94
04-15-2011, 10:27 PM
My CSS now reads:



* {margin:0; padding:0;}

html, body, div, span,object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strike, strong, sub, sup, tt, var, b, i, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
textarea { overflow:auto; }




ul#stoplight {

margin: 0 840;
width:0px;
height:0px;
list-style:none;

}

ul#stoplight li {

display:inline;

}

ul#stoplight li a {

float:left;
text-indent:-9999px;
text-decoration:none;


}

ul#stoplight li#stoplight1 a {

width:178px;
height:82px;
background:url(sprites.png) no-repeat 0 0;

}

ul#stoplight li#stoplight1 a:hover {

background-position: -179px 0;

}

ul#stoplight li#stoplight2 a {

width:179px;
height:63px;
background:url(sprites.png) no-repeat 0 -82px;

}

ul#stoplight li#stoplight2 a:hover {

background-position: -359px -82px;

}

ul#stoplight li#stoplight3 a {

width:179px;
height:66px;
background:url(sprites.png) no-repeat 0 -145px;
}

ul#stoplight li#stoplight3 a:hover {

background-position: -538px -145px;
}


body {

background-image:url('GradientBackground.png');
background-repeat:no-repeat;
background-position:0px 0px;

}



.arial {font-family: Arial;}
.tahoma {font-family: Tahoma;}
.verdana {font-family: Verdana;}
.underline {text-decoration: underline}
.blackfont1 {font-size: 16px;}
.whitetext1 {color: #F2F2F2; font-size: 30px;}
.whitetext2 {color: #EBEBEB; font-size: 17px;}
.whitetext3 {color: #DBDBDB; font-size: 18px;}






#background {top: 2.7em; left: 4em; position:absolute; z-index: -2; visibility: show;}
#stoplightbottom {margin: 211 840; position: absolute; z-index: 1; visibility: show;}
#smartboard {margin: 230 970; position: absolute; z-index: 1; visibility: show;}
#specials {margin: 410 970; position: absolute; z-index: 1; visibility: show;}
#text2 {margin: 600 430; position: absolute; z-index: 1; visibility: show;}
#avsign {margin: -5 50; position: absolute; z-index: 1; visibility: show;}
#states {margin: 90 540; position: absolute; z-index: 1; visibility: show;}
#contractorstext {margin: 30 530; position: absolute; z-index: 1; visibility: show; width: 200;}
#company1 {margin: 220 200; position: absolute; z-index: 1; visibility: show;}
#company2 {margin: 220 300; position: absolute; z-index: 1; visibility: show;}
#company3 {margin: 220 400; position: absolute; z-index: 1; visibility: show;}
#company4 {margin: 220 500; position: absolute; z-index: 1; visibility: show;}
#company5 {margin: 220 600; position: absolute; z-index: 1; visibility: show;}


#contactinfo {margin: 270 170; position: absolute; z-index: 2; visibility: show;}
#contactimage {margin: 270 170; position: absolute; z-index: 1; visibility: show;}

#greenbackground {margin: 230 170; position: absolute; z-index: 1; visibility: show;}
#greybackground {margin: 230 170; position: absolute; z-index: 1; visibility: show;}

#aboutusheader {margin: 240 260; position: absolute; z-index: 2; visibility: show; width: 600;}
#aboutusparagraph {margin: 290 180; position: absolute; z-index: 2; visibility: show; width: 630;}

#list1 {margin: 400 190; position: absolute; z-index: 2; visibility: show; width: 200;}
#list2 {margin: 400 400; position: absolute; z-index: 2; visibility: show; width: 200;}
#list3 {margin: 400 610; position: absolute; z-index: 2; visibility: show; width: 200;}


I reopened the file in Internet Explorer and Firefox. It looks like the same result. Assuming I did it right, the code doesn't seem to be working :S. Thanks anyway.

shinydarkrai94
04-17-2011, 04:53 AM
Btw I still need help on this and my site is live if you wanna see it at www.avavenue.com.

SB65
04-17-2011, 07:45 AM
You have no doctype (http://www.alistapart.com/articles/doctype/) on your page. IE will (generally) not display a page correctly without one. It's possibly something else, but that's the first thing you need to fix.

shinydarkrai94
04-18-2011, 04:10 PM
Ok, I'll do that.

Wojjie
04-18-2011, 04:16 PM
Your "http://www.avavenue.com/Images/GradientBackground.png" should be 1 pixel wide, and in your CSS you can do:



body {
background: url('GradientBackground.png') repeat-x top;
}


That will save you a lot of bandwidth, as the image is 2MB at the moment.

Also, like SB65 said, use a doctype, it will make it more consistent with chrome/firefox:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Wojjie
04-18-2011, 05:07 PM
Also, don't position the stop light by using margin, instead you should be making a container for the page the width you want, then position it in the center. Then you can do float right for the stop light and pole, just make sure to set the width of the divs.

shinydarkrai94
04-19-2011, 04:54 AM
Well, I've been busy all day doing errands and I've just sat down to work on the website again. As you can tell, I'm sort of a noob at websites (still) so I'm having a bit of trouble with the doctypes. I used all the ones that were recommended on the link that sb65 gave, but then it displayed all the images over each other like it was ignoring my css.

Also, wojjie, I'm a bit new to containers too. Do you think I should position my specials and smartboard images left of the stoplight? How would I position all the images inside the container (besides the ones that can be centered, moved to the left, etc)?

Anyway, thanks everyone for all your help so far.

shinydarkrai94
04-19-2011, 05:08 AM
By the way, my html pages now read:


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="AV Avenue is a K-12 Classroom Technology Specialists company. We provide audio/video equipment sales, systems installations and service of existing systems.">
<meta name="keywords" content="av avenue, audio, video, audio visual, classroom, education, installation, smartboard, k-12">

<title>AV Avenue</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css">

</head>

<body>

<ul id="stoplight">
<li id="stoplight1"><a href="index.html"></a></li>
<li id="stoplight2"><a href="aboutus.html"></a></li>
<li id="stoplight3"><a href="contactus.html"></a></li>
</ul>


<div id="stoplightbottom">
<img src="Images/Home Page/StoplightBottom.png" alt="">
</div>

<div id="smartboard">
<img src="Images/Home Page/Smartboard.png" alt="">
</div>

<div id="specials">
<img src="Images/Home Page/AprilSpecials.png" alt="Check out our special services for April!">
</div>

<div id="text2">
<img src="Images/Home Page/Text2.png" alt="">
</div>

<div id="avsign">
<img src="Images/Home Page/AVAvenueLeftSign.png" alt="">
</div>

<div id="states">
<img src="Images/Home Page/States.png" alt="">
</div>

<div id="contractorstext">
<span class="blackfont1 comicsansms">Technology Systems Contractors Power Limited Technicians</span>
</div>


<div id="company1">
<img src="Images/Home Page/Company1.png" height="30" width="100" alt="">
</div>

<div id="company2">
<img src="Images/Home Page/Company2.png" height="30" width="100" alt="">
</div>

<div id="company3">
<img src="Images/Home Page/Company3.png" height="30" width="100" alt="">
</div>

<div id="company4">
<img src="Images/Home Page/Company4.png" height="30" width="100" alt="">
</div>

<div id="company5">
<img src="Images/Home Page/Company5.png" height="30" width="100"alt="">
</div>





<div id="flashmovie">

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="600" height="400" id="AV_Ave" align="middle">

<param name="movie" value="AV_Ave.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#000000">
<param name="play" value="true">

<param name="loop" value="true">
<param name="wmode" value="window">
<param name="scale" value="showall">
<param name="menu" value="true">
<param name="devicefont" value="false">
<param name="salign" value="">
<param name="allowScriptAccess" value="sameDomain">


<object type="application/x-shockwave-flash" data="AV_Ave.swf" width="600" height="400">

<param name="movie" value="AV_Ave.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#000000">
<param name="play" value="true">

<param name="loop" value="true">
<param name="wmode" value="window">
<param name="scale" value="showall">
<param name="menu" value="true">
<param name="devicefont" value="false">
<param name="salign" value="">
<param name="allowScriptAccess" value="sameDomain">

<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player">
</a>

</object>

</object>

</div>


</body>

</html>


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="AV Avenue is a K-12 Classroom Technology Specialists company. We provide audio/video equipment sales, systems installations and service of existing systems." />
<meta name="keywords" content="av avenue, audio, video, audio visual, classroom, education, installation, smartboard, k-12" />


<title>AV Avenue</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

</head>

<body>

<ul id="stoplight">
<li id="stoplight1"><a href="index.html"></a></li>
<li id="stoplight2"><a href="aboutus.html"></a></li>
<li id="stoplight3"><a href="contactus.html"></a></li>
</ul>


<div id="stoplightbottom">
<img src="Images/About Us/StoplightBottom.png"/>
</div>

<div id="smartboard">
<img src="Images/About Us/Smartboard.png"/>
</div>

<div id="specials">
<img src="Images/About Us/AprilSpecials.png"/>
</div>

<div id="avsign">
<img src="Images/About Us/AVAvenueLeftSign.png" />
</div>

<div id="states">
<img src="Images/About Us/States.png" />
</div>

<div id="contractorstext">
<span class="blackfont1 comicsansms">Technology Systems Contractors Power Limited Technicians</span>
</div>

<div id="greenbackground">
<img src="Images/About Us/GreenBackground.png" height="500" width="630"/>
</div>

<div id="aboutusheader" width="250">
<span class="whitetext1 tahoma">Classroom Technology Specialists</span>
</div>

<div id="aboutusparagraph">
<span class="whitetext3 arial">AV Avenue has been specializing in K-12 and Higher Education for nearly 10 years. We provide audio/video equipment sales, systems installations, and services for existing systems. While our focus is in classroom technology, we also offer the following services below:
</span>
</div>

<div id="list1">
<span class="whitetext2 arial underline">Classrooms</span>
<ul>
<li><span class="whitetext2 arial">Projectors</span></li>
<li><span class="whitetext2 arial">SMART Boards</span></li>
<li><span class="whitetext2 arial">Audio Systems</span></li>
<li><span class="whitetext2 arial">Sound Field Systems</span></li>
<li><span class="whitetext2 arial">Control Systems</span></li>
<li><span class="whitetext2 arial">Acoustics</span></li>
</ul>
</br>

<span class="whitetext2 arial underline">Building Wide</span>
<ul>
<li><span class="whitetext2 arial">Video Surveillance</span></li>
<li><span class="whitetext2 arial">Paging</span></li>
</ul>
</br>


<span class="whitetext2 arial underline">Cafeteria</span>
<ul>
<li><span class="whitetext2 arial">Acoustics</span></li>
<li><span class="whitetext2 arial">Sound Systems</span></li>
</ul>

</div>

<div id="list2">
<span class="whitetext2 arial underline">Auditorium</span>
<ul>
<li><span class="whitetext2 arial">Acoustics</span></li>
<li><span class="whitetext2 arial">Sound Systems</span></li>
<li><span class="whitetext2 arial">Video Displays</span></li>
<li><span class="whitetext2 arial">Video Recordings</span></li>
</ul>
</br>

<span class="whitetext2 arial underline">Library</span>
<ul>
<li><span class="whitetext2 arial">Acoustics</span></li>
<li><span class="whitetext2 arial">Sound Systems</span></li>
</ul>
</br>


<span class="whitetext2 arial underline">Music Rooms</span>
<ul>
<li><span class="whitetext2 arial">Acoustics</span></li>
<li><span class="whitetext2 arial">Sound Systems</span></li>
<li><span class="whitetext2 arial">Video Systems</span></li>
</ul>

</div>

<div id="list3">
<span class="whitetext2 arial underline">Gymnasium</span>
<ul>
<li><span class="whitetext2 arial">Acoustics</span></li>
<li><span class="whitetext2 arial">Sound Systems</span></li>
<li><span class="whitetext2 arial">Video Displays</span></li>
<li><span class="whitetext2 arial">Video Recording</span></li>
</ul>
</br>

<span class="whitetext2 arial underline">Swimming Pool</span>
<ul>
<li><span class="whitetext2 arial">Acoustics</span></li>
<li><span class="whitetext2 arial">Sound Systems</span></li>
</ul>
</br>


<span class="whitetext2 arial underline">Athletic Fields</span>
<ul>
<li><span class="whitetext2 arial">Sound Systems</span></li>
<li><span class="whitetext2 arial">Video Recording</span></li>
<li><span class="whitetext2 arial">Scoreboards</span></li>
</ul>
</br>

<span class="whitetext2 arial underline">Dance Studio</span>
<ul>
<li><span class="whitetext2 arial">Sound Systems</span></li>
<li><span class="whitetext2 arial">Acoustics</span></li>
</ul>

</div>

</body>

</html>


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="AV Avenue is a K-12 Classroom Technology Specialists company. We provide audio/video equipment sales, systems installations and service of existing systems." />
<meta name="keywords" content="av avenue, audio, video, audio visual, classroom, education, installation, smartboard, k-12" />


<title>AV Avenue</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

</head>

<body>

<ul id="stoplight">
<li id="stoplight1"><a href="index.html"></a></li>
<li id="stoplight2"><a href="aboutus.html"></a></li>
<li id="stoplight3"><a href="contactus.html"></a></li>
</ul>


<div id="stoplightbottom">
<img src="Images/Contact Us/StoplightBottom.png"/>
</div>

<div id="smartboard">
<img src="Images/Contact Us/Smartboard.png"/>
</div>

<div id="specials">
<img src="Images/Contact Us/AprilSpecials.png"/>
</div>

<div id="avsign">
<img src="Images/Contact Us/AVAvenueLeftSign.png" />
</div>

<div id="states">
<img src="Images/Contact Us/States.png" />
</div>

<div id="contractorstext">
<span class="blackfont1 comicsansms">Technology Systems Contractors Power Limited Technicians</span>
</div>


<div id="contactimage">
<img src="Images/Contact Us/ContactImage.png" width="650" height="450">
</div>

<div id="contactinfo">
<img src="Images/Contact Us/ContactInfo.png" width="650" height="450">
</div>



</body>

</html>

And my CSS reads:


* {margin:0; padding:0;}

html, body, div, span,object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strike, strong, sub, sup, tt, var, b, i, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
textarea { overflow:auto; }




ul#stoplight {

margin: 0 840;
width:0px;
height:0px;
list-style:none;

}

ul#stoplight li {

display:inline;

}

ul#stoplight li a {

float:left;
text-indent:-9999px;
text-decoration:none;


}

ul#stoplight li#stoplight1 a {

width:178px;
height:82px;
background:url(Images/Stoplights.png) no-repeat 0 0;

}

ul#stoplight li#stoplight1 a:hover {

background-position: -221px 0;

}

ul#stoplight li#stoplight2 a {

width:178px;
height:63px;
background:url(Images/Stoplights.png) no-repeat 0 -82px;

}

ul#stoplight li#stoplight2 a:hover {

background-position: -221px -83px;

}

ul#stoplight li#stoplight3 a {

width:179px;
height:66px;
background:url(Images/Stoplights.png) no-repeat 0 -145px;
}

ul#stoplight li#stoplight3 a:hover {

background-position: -221px -144px;
}


body {

background-image: url('Images/GradientBackground.png');
background-repeat: repeat-x;

}



.arial {font-family: Arial;}
.tahoma {font-family: Tahoma;}
.verdana {font-family: Verdana;}
.comicsansms {font-family: Comic Sans MS;}
.underline {text-decoration: underline}
.blackfont1 {font-size: 16px;}
.whitetext1 {color: #F2F2F2; font-size: 30px;}
.whitetext2 {color: #EBEBEB; font-size: 17px;}
.whitetext3 {color: #DBDBDB; font-size: 18px;}






#background {top: 2.7em; left: 4em; position:absolute; z-index: -2; visibility: show;}
#stoplightbottom {margin: 211 840; position: absolute; z-index: 1; visibility: show;}
#smartboard {margin: 230 970; position: absolute; z-index: 1; visibility: show;}
#specials {margin: 410 970; position: absolute; z-index: 1; visibility: show;}
#text2 {margin: 650 155; position: absolute; z-index: 3; visibility: show;}
#avsign {margin: -5 50; position: absolute; z-index: 1; visibility: show;}
#states {margin: 90 540; position: absolute; z-index: 1; visibility: show;}
#contractorstext {margin: 30 530; position: absolute; z-index: 1; visibility: show; width: 250;}
#company1 {margin: 210 250; position: absolute; z-index: 1; visibility: show;}
#company2 {margin: 210 350; position: absolute; z-index: 1; visibility: show;}
#company3 {margin: 210 450; position: absolute; z-index: 1; visibility: show;}
#company4 {margin: 210 550; position: absolute; z-index: 1; visibility: show;}
#company5 {margin: 210 650; position: absolute; z-index: 1; visibility: show;}


#contactinfo {margin: 270 170; position: absolute; z-index: 2; visibility: show;}
#contactimage {margin: 270 170; position: absolute; z-index: 1; visibility: show;}

#greenbackground {margin: 230 170; position: absolute; z-index: 1; visibility: show;}
#greybackground {margin: 230 170; position: absolute; z-index: 1; visibility: show;}

#aboutusheader {margin: 240 260; position: absolute; z-index: 2; visibility: show; width: 600;}
#aboutusparagraph {margin: 290 180; position: absolute; z-index: 2; visibility: show; width: 630;}

#list1 {margin: 400 190; position: absolute; z-index: 2; visibility: show; width: 200;}
#list2 {margin: 400 400; position: absolute; z-index: 2; visibility: show; width: 200;}
#list3 {margin: 400 610; position: absolute; z-index: 2; visibility: show; width: 200;}

#flashmovie {margin: 240 200; position: absolute; z-index: 2; visibility: show; width: 200;}

Any other suggestions or corrections for any of my code is welcomed. Thanks again everyone for your time.

Wojjie
04-19-2011, 05:28 AM
I would start by having one big container, with two containers inside, the left content in one, and the stop light with menu floating on the right.

Then I would put the stop light like you have it, and put the pole as a background of the rest of the right, positioning the rest of it with paddings/margins in that container.

Though the way I would do it would require some testing/tweaking.

ie:


<body>
<div class="page">
<div class="logo">
... logo with top part of pole and map (since logos really should be at the top of html pages, dont forget to put an anchor on the logo to your home page ...
</div>
<div class="rightSide">
<div id="stopLight">
... stop light ...
</div>
<div id="stopLightPole">
<div id="poleTop"><img src=".." ... /></div>
<img class="board" src="..." width=".." height="..." />
<div class="menu">
... your menu / specials ...
</div>

</div>
<div class="leftSide">
<div class="pole">&nbsp;</div>
<div class="content">
.. small logos ...
... flash video ..
... classroom technology specialists ...
</div>
</div>
</div>


Then the CSS would be something like:


body{margin:0;padding:0;text-align:center;background:url('verticalgradient.png') repeat-x top #aaa /*or whatever the color code the gradient ends at*/; ... }
.page{width:980px;margin:0 auto;}
.logo {float:left; width:660px;/*assuming right side is 300px and we are leaving atleast 10px of space in case*/}
.rightSide{width:300px;float:right; ...}
#stopLightPole{background: url(pole.png) repeat-y left;position:relative}
#stopLightPole .poleTop{position:absolute;top:0px}
.rightSide .board{margin:...}
.rightSide .menu{margin:... }

.leftSide {width:670px; ... } /* you might need float:left, not sure, have to test it, possibly test the width */
.leftSide .pole {background: url... repeat-y left; ...}
etc


Sorry, was a quick rough example just to give you some ideas.

shinydarkrai94
04-19-2011, 05:58 AM
Oh cool, that looks good, I'll have to mess around with it a bit. Any idea why my doctype is causing my css to be ignored?

Wojjie
04-19-2011, 06:43 AM
Essentially tells the browser (IE specifically) how to render the page or what kind of page it is.

There is a good explanation I read a while back on the internet, basically stating that IE defaults to a certain mode/rendering that messes stuff up, probably meant for older sites that expect IE to work a certain way?

shinydarkrai94
04-19-2011, 07:23 AM
No, I mean whenever I use a doctype, all of my images are displayed at the top left corner of the screen (probably because my css is ignored). I can't figure out why and I've tried several doctypes now :S.

SB65
04-19-2011, 07:23 AM
In the absence of a doctype IE will display in "quirks mode" - here's an explanation (http://www.quirksmode.org/css/quirksmode.html).

shinydarkrai94
04-19-2011, 07:48 AM
Quirky mode seems to be working for me better :S. Here's a picture of my site when I use a doctype: http://i986.photobucket.com/albums/ae349/shinydarkrai94/error1.jpg.

I just don't understand it @_@ the article you gave me only had small differences between strict and quirky. This is a rather large difference lol.

Relevant code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>

<link rel="stylesheet" type="text/css" href="stylesheet.css">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="AV Avenue is a K-12 Classroom Technology Specialists company. We provide audio/video equipment sales, systems installations and service of existing systems.">
<meta name="keywords" content="av avenue, audio, video, audio visual, classroom, education, installation, smartboard, k-12">

<title>AV Avenue</title>

</head>

shinydarkrai94
04-19-2011, 08:17 AM
Figured it out :). Apparently, I validated my code before I put in a doctype which caused some validation errors when I put in the doctype (like <img /> instead of <img>). Also, a lot of my css was bad which was causing another large part of the problem. Thanks everyone for the links to the doctypes though, I've learned a lot :).

Wojjie
04-19-2011, 04:44 PM
In the absence of a doctype IE will display in "quirks mode" - here's an explanation (http://www.quirksmode.org/css/quirksmode.html).

Thanks, I forgot the mode it defaulted to, I just remember to always use one.

teedoff
04-19-2011, 08:30 PM
Try using the html 4.01 doctype. I validated with your code and this doctype and returned no errors in validation.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



validation errors when I put in the doctype (like <img /> instead of <img>).

Yes depending on which doctype and whether its strict or transitional, tags have to be closed in certain ways. Which is why I suggested, with your current code, that you use html4.01.

You shouldnt say quirks mode works for me. lol You should ALWAYS use a valid doctype from the start.

shinydarkrai94
04-20-2011, 03:02 AM
Yes, everything is working now. Earlier today I validated my html and css and it fixed my IE problem. Thanks again to everyone who helped me out with this :). Greatly appreciated.

hotelscyprus
04-20-2011, 07:06 AM
Shiny...also you can check your website on various browsers through browsershots.org. It will show how your website will be on several browsers. This too helps you to fix your code.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum