PDA

View Full Version : pages not looking right in Internet explorer


silverglade
01-19-2009, 04:33 PM
hi, i think its something in my CSS because all of my pages are not looking right in internet explorer they look fine in firefox. any help greatly appreciated.
derek.

here is a link to one of the pages.

http://derekvanderven.com/flower_events/bouquets/cascading.html

here is the CSS to the page- i commented the image gallery at the bottom.

@charset "utf-8";
/* CSS Document */

body {
margin: 0; /* clear for browsers */
padding: 0;
background-color: #ffffff;
}

#container {
background-image: url(compressed_background.gif);
background-repeat: no-repeat;
margin:20px auto 0 auto;
width: 750px;
height: 576px;
}

#navigation {
margin: 0 auto 0 auto;
width: 750px;
height: 27px;
}

#homelink {
margin: 20px auto 0 auto;
width: 281px;
height: 60px;
}

#contentblock {
float: left;
width: 280px;
height: 325px;
margin-top: 65px;
margin-left: 65px;

}

#flashblock {
float: right;
width: 280px;
height: 325px;
margin-top: 65px;
margin-right: 65px;

}


#textblock {
float: right;
width: 280px;
height: 325px;
margin-top: 65px;
margin-right: 65px;

}
#footer {
float: left;
margin-top: 55px;
margin-left: 160px;
width: 400px;
height: 25px;
text-align: center;
color: #333333;
font-weight: bold;
}
/************************************************** ***********************/
/*****************************************DROPDOWN MENU CODE********/

/*
Title: Vertical CSS menu with a behavior file.
Author: Stefan Vervoort
Blog: http://www.divitodesign.com/blog/
Article: http://www.divitodesign.com/blog/2008/01/vertical-css-menu-with-a-behavior-file/
*/

body {
behavior: url(csshover.htc);
}

p a {
color: #887388; /* made the link text red again */
text-decoration:none;!important;
font-size:20px; /*change size of nav and dropdown text*/
font-family:Arial, Helvetica, sans-serif;
}

a{
color:#fff;
text-decoration:none; /* text color */
}
p a:hover{ text-decoration: none!important;
}

ul#nav {
list-style: none;
padding: 0;
margin: 0;
}


ul#nav li a {
display: block;
font-weight: bold; /*background color */
padding: 2px 10px;
background-color: #887388;

}

ul#nav li a:hover{
color:#fff; /* text hover */
background-color: #887388;
}

ul#nav li {
float: left;
position: relative;
width: 105px; /* change width of boxes */
text-align: center;
margin-right:0px;
border:1px solid #ccc;
background-color: #887388;

}

ul#nav li.current a{
background-color: #887388; /* fixed the home red button to gray */
}

ul#nav li.current a:hover{
background:#887388; /* background hover */
}

li ul {
display: none;
position: absolute;
width:120px; /* width of dropdown menu */
top: 0;
left: 0;
font-weight: normal;
padding: 1px 0 10px 0;
margin-left:-1px;
}

ul#nav li ul.sub li{
border-width:0 1px 1px 1px!important;
}

ul#nav li ul.sub li a{
font-weight: normal!important;
}
li>ul {
top: auto;
left: auto;
}

li:hover ul, li.over ul {
display: block;
}

ul.sub { /* got rid of bullets in firefox */

list-style: none ;
}

/************************************************** ************************************************** **/
/************************************************** ************************************************** */
/********************IMAGE GALLERY STYLE CODE********************************************** **/

div.img
{
margin: 2px;
/*border: 1px solid #0000ff;*/
height: 65px;
width: 65px;
float: left;
text-align: center;

}

div.img img
{
width= 65px;
height= 65px;
display: inline;
margin: 3px;
/*border: 1px solid #ffffff;*/
}

div.img a:hover img
{
border: 1px solid #ffffff;
}

div.desc
{
float:left;
margin-left: 0px;
text-align: center;
font-style: italic;
font-weight: bold;
width: 150px;

}


#img_container {
float: left;
margin-top: 60px;
margin-left: 130px;
width: 160px;
height: 325px;

}


and here is the html for the page.

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

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>flower events Cascading</title>
<style>
.style1 {font-style: italic}
</style>

</head>

<body>

<div id= "container">
<div id= "navigation">

<!-- START OF DROPDOWN MENU -->

<ul id="nav">
<li class="current"><a href="#" title="bouquets">Bouquets</a> <!-- navigation headers -->

<ul class="sub">
<li><a href="cascading.html" title="cascading">Cascading</a></li>
<li><a href="presentation.html" title="presentation">Presentation</a></li>
<li><a href="blue_white.html" title="blue & white ">Round-blue &amp; white</a></li>
<li><a href="fall.html" title="fall">Fall</a></li>
<li><a href="green_white.html" title="green_white">Green and White</a></li>
<li><a href="lavender_purple.html" title="lavender and purple">Lavender &amp; Purple</a></li>
<li><a href="mixed.html" title="mixed">Mixed</a></li>
<li><a href="pastel.html" title="pastel">Pastel</a></li>
<li><a href="pink.html" title="pink">Pink</a></li>
<li><a href="red.html" title="red">Red</a></li>
<li><a href="red_white.html" title="red & white">Red &amp; White</a></li>
<li><a href="white.html" title="white">White</a></li>
<li><a href="yellow.html" title="yellow">Yellow</a></li>
</ul>
</li>

<li class="current"><a href="#" title="personal flowers">Personal</a> <!-- navigation headers -->

<ul class="sub">
<li><a href="personal/boutonnieres.html" title="boutonnieres">Boutonnieres</a></li>
<li><a href="personal/corsages.html" title="corsages">Corsages</a></li>
<li><a href="personal/pomanders.html" title="pomanders ">Pomanders</a></li>
<li><a href="personal/tussie_mussies.html" title="tussie-mussies">Tussie_Mussies</a></li>
<li><a href="personal/flower_girl.html" title="flower girl and ring bearer">Flower Girl and Ring Bearer</a></li>
</ul>
</li>


<li class="current"><a href="#" title="ceremony">Ceremony</a> <!-- navigation headers -->

<ul class="sub">
<li><a href="ceremony/ceremony_decor.html" title="ceremony decor">Ceremony Decor</a></li>
<li><a href="ceremony/arches.html" title="arches">Arches</a></li>
<li><a href="ceremony/huppas.html" title="huppas ">Huppas</a></li>
<li><a href="ceremony/gazebos.html" title="gazebos">Gazebos</a></li>
<li><a href="ceremony/church_decor.html" title="church decor">Church Decor</a></li>
<li><a href="ceremony/chairs_pews.html" title="Chairs and Pews">Chairs &amp; Pews</a></li>
</ul>
</li>


<li class="current"><a href="#" title="reception">Reception</a> <!-- navigation headers -->

<ul class="sub">
<li><a href="reception/centerpieces.html" title="centerpieces">Centerpieces</a></li>
<li><a href="reception/high.html" title="high">High</a></li>
<li><a href="reception/low.html" title="low">Low</a></li>
<li><a href="reception/cocktail_hour.html" title="cocktail hour">Cocktail Hour</a></li>
<li><a href="reception/place_card_table.html" title="place card table">Place Card Table</a></li>
<li><a href="reception/sweetheart_table.html" title="sweetheart table">Sweetheart Table</a></li>
<li><a href="reception/cake_decor.html" title="cake decor">Cake Decor</a></li>
</ul>
</li>


<li class="current"><a href="#" title="rentals">Rentals</a> <!-- navigation headers -->

<ul class="sub">
<li><a href="rentals/arches.html" title="arches">Arches</a></li>
<li><a href="rentals/huppas.html" title="huppas">Huppas</a></li>
<li><a href="rentals/candelabras_stands.html" title="candelabras & Stands">Candelabras &amp; Stands</a></li>
<li><a href="rentals/columns_colonnades.html" title="columns & colonnades">Columns &amp; Colonnades</a></li>
</ul>
</li>

<li class="current"><a href="../testimonials.html" title="testimonials">Testimonials</a> <!-- navigation headers -->
</li>

<li class="current"><a href="../contact.html" title="contact us">Contact Us</a> <!-- navigation headers -->
</li>
</ul> <!--end of nav--><!-- END OF DROPDOWN MENU-->
</div> <!--end of navigation-->


<div id="homelink"><a href="../home.html"><img src="../home_link.gif" border="0" /></a> </div>



<!--<div id= "contentblock"> -->
<div id="img_container">
<div class="img"><a href="cascading/images/1a.JPG"><img src="cascading/images/1a_t.jpg" width="65" height="65" border="0" /></a></div>

<div class="img">
<a target="_blank" href="cascading/images/2a.JPG">
<img src="cascading/images/2a_t.jpg" width="65"
height="65" border="0"/> </a></div>

<div class="img">
<a target="_blank" href="cascading/images/3a.JPG">
<img src="cascading/images/3a_t.jpg" width="65"
height="65" border="0"/> </a></div>

<div class="img">
<a target="_blank" href="cascading/images/4a.JPG">
<img src="cascading/images/4a_t.jpg" width="65"
height="65" border="0"/> </a></div>

<div class="img"><a target="_blank" href="cascading/images/5a.JPG"><img src="cascading/images/5a_t.jpg" width="65" height="65" border="0"/></a></div>

<div class="img">
<a target="_blank" href="cascading/images/6a.gif">
<img src="cascading/images/6a_t.jpg" width="65"
height="65" border="0"/> </a></div>

<div class="img"><a href="cascading/images/7a.gif"><img src="cascading/images/7a_t.jpg" width="65" height="65" /></a> </div>

<div class="img"><a href="cascading/images/4a.gif"><img src="cascading/images/4a_t.jpg" width="65" height="65" /></a></div>

<div class="desc"> Cascading</div>
</div>
<!-- end img_container-->
<!-- </div> end contentblock-->


<div id="textblock" >
<p><strong><em>
Let History Inspire You....</em></strong></p>
<p align="justify">The custom of enhancing the wedding ceremony with flowers and the tradition of asking your closest girlfriends to be your bridesmaids dates back to ancient times. Maids would typically dress in fashion similar to the bride to confuse evil spirits trying to kidnap her. Today, bridesmaids are chosen for their loyalty and supportiveness to the bride and their dresses compliment the bride and her wedding theme. </p>
<p align="justify">&nbsp; </p>
<p>&nbsp;</p>
</div>
<!-- end flashblock div -->
<div class="style1" id="footer"> Website Design by Derekvanderven.com &copy; 2009</div>
</div>
<!--end of container-->
</body>
</html>

silverglade
01-19-2009, 05:00 PM
i couldnt find anything wrong with my code, so i suspected the browser, and i was right! i was using internet explorer 6, once i upgraded to 7, the pages looked fine. does that mean anyone without 7 will not see my website correctly>? thats bad!! any feedback appreciated. thank you. derek

domedia
01-19-2009, 07:25 PM
It means that all the people using IE6, most likely are going to see what you were seeing with IE6. You should have both browsers to test with.