hi, my page looks fine in firefox, and as far as i could tell, my code is ok, but it must not be, because my page looks terrible in internet explorer. any help greatly appreciated. im stuck. thank you. derek
here is the link to the page-it must be something in my CSS because my other pages arent looking right in IE either.
http://derekvanderven.com/flower_eve...cascading.html
here is the css-i commented the "image gallery code" at the bottom
Code:
@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
Code:
<!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 & 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 & 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 & 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 & 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 & Stands</a></li>
<li><a href="rentals/columns_colonnades.html" title="columns & colonnades">Columns & 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"> </p>
<p> </p>
</div>
<!-- end flashblock div -->
<div class="style1" id="footer"> Website Design by Derekvanderven.com © 2009</div>
</div>
<!--end of container-->
</body>
</html>
even my home page is not right now.
it must be something in my css.
http://derekvanderven.com/flower_events/home.html
Last edited by silverglade; 01-19-2009 at 12:29 PM..
|
