#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2007
    Posts
    1
    Rep Power
    0

    Need some CSS HELP!


    I'm redesigning a site and have set up a css layout, looks great in Safari and Firefox, but as soon as I preview it in IE, crap happens. A div moves, page backgound drops out, CSS menu doesn't work. Its driving me crazy. I'm tempted to just redue it as a tables.

    Can any one help? I'll post the html and css.


    HTML

    </head>
    <body bgcolor="315467" background="Images Folder/BrowserBackground.gif">
    <div id="holder">
    <div id="mainPage">
    <div id="headerBox"><img src="Images Folder/DBLogo.gif" alt="Discover Bristol Logo" /></div>
    <div id="navBox">
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">HOME</a></li>
    <li><a href="#">&bull; OUR TOWN </a>
    <ul id="subnavlist">
    <li id="subactive"><a href="#" id="subcurrent">History</a></li>
    <li><a href="#">Helpful Information</a></li>
    <li><a href="#">Request A Brochure</a></li>
    <li><a href="#">Downloads</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </li>
    <li><a href="#">&bull; THINGS TO DO </a>
    <ul id="subnavlist">
    <li id="subactive"><a href="#" id="subcurrent">Day Trips</a></li>
    <li><a href="#">Tours</a></li>
    <li><a href="#">Outdoor Activities</a></li>
    <li><a href="#">For Kids</a></li>
    <li><a href="#">Entertainment</a></li>
    <li><a href="#">Shopping</a></li>
    <li><a href="#">Galleries</a></li>
    <li><a href="#">Boating</a></li>
    <li><a href="#">Golfing</a></li>
    </ul>
    </li>
    <li><a href="#">&bull; PLACES TO SEE</a>
    <ul id="subnavlist">
    <li id="subactive"><a href="#" id="subcurrent">Museums</a></li>
    <li><a href="#">Parks</a></li>
    </ul>
    </li>
    <li><a href="#">WHATS GOIN ON </a></li>
    <li><a href="#">&bull; STAY &amp; DINE</a>
    <ul id="subnavlist">
    <li id="subactive"><a href="#" id="subcurrent">Dining</a></li>
    <li><a href="#">Vineyards &amp; Wineries</a></li>
    <li><a href="#">Lodging</a></li>
    </ul>
    </li>
    <li><a href="#">WEDDINGS </a></li>
    <li><a href="#">REAL ESTATE </a></li>
    <li><a href="#">MAP </a></li>
    </ul>
    </div>
    </div>
    <div id="leftContent">
    <div id="highlightedOne"><p><span class="highlightHead">Bristol's Fourth of July Parade</span><br />
    The Country's oldest continuios Parade</p>
    </div>
    <div id="highlightedTwo"><span class="highlightHead">Bristol's Fourth of July Parade</span><br />
    The Country's oldest continuios Parade</div>
    <div id="highlightedThree"><span class="highlightHead">Bristol's Fourth of July Parade</span><br />
    The Country's oldest continuios Parade</div>
    <div id="seperatorOne"></div>
    <div id="brochureBox">
    <p><span class="largerText">Request a <br />
    </span><span class="boldText">FREE</span><span class="largerText"><br />
    Brochure<br />
    Today!</span><br />
    <br />
    Or<br />
    Download<br />
    Your Copy!</p>
    </div>
    <div id="seperatorTwo"></div>
    <div id="mapBox">
    <p>Located Bristol's <br />
    <span class="highlightHead">TOP <br />
    SPOTS</span><br />
    with Our <br />
    Helpful <br />
    Map.</p>
    </div>
    </div>
    <div id="pictureBox"><img src="Images Folder/MainPic.jpg" alt="Bristol Fourth of July Parade" /></div>
    <div class="bodyCopy" id="contentBox">
    <p><span class="highlightHead">Welcome to Bristol!
    </span><br />
    <br />
    It will not take you long to realize what makes Bristol such an extraordinary community. We are so pleased that you are intersted in visiting our town and experiencing all that Bristol has to offer.
    Our eclectic shops and delectable restaurants, water views from almost everywhere, parks and recreation areas with open space to enjoy, museums and a rich history are just a few examples of the treasures that you can find here in Bristol.
    <br />
    <br />
    Bristol is known as the most patriotic town in America and with good reason. Host to the oldest continuous Fourth of July celebration in the nation, Bristol has celebrated its independence since 1785 with a parade that rivals any other.* Our parade route is lined with historic homes that are meticulously kept and our flag waves proudly everywhere one looks. Our main street is adorned year round with a red, white and blue center stripe, a testament to the place that patriotism holds in our hearts.
    <br />
    <br />
    With our site, you will be able to plan that perfect trip or family outing to our beautiful town. Finding that perfect garment shop or the best dining spots is easy with the tools and features on the various pages of our site.
    <br />
    <br />
    Enjoy your stay with us!</p>
    </div>
    </div>
    <div id="legalBox">&copy; 2002 East Bay Newspapers(E-Mail address blocked: See forum rules)</div>
    </div>
    </body>


    CSS

    body {
    background: 315467;
    text-align: center;
    margin: 0px;
    padding: 0px;
    }
    #holder {
    width: 789px;
    text-align: left;
    margin: 0 auto;
    height: 655px;
    }
    #legalBox {
    font: bold 10px Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-align: right;
    vertical-align: bottom;
    white-space: normal;
    margin: 2px 0px 0px;
    padding: 0px;
    }
    #mainPage {
    background: url(../Images%20Folder/Background.jpg) no-repeat left top;
    margin: 0px;
    padding: 0px;
    height: 641px;
    width: 789px;
    }
    #headerBox {
    margin: 0px;
    padding: 0px;
    width: 789px;
    }
    #navBox {
    color: #000000;
    text-align: center;
    padding: 0px;
    height: 49px;
    width: 750px;
    margin: 5px 0px 0px 20px;
    float: left;
    }
    #leftContent {
    margin: 0px 0px 0px 28px;
    padding: 0px;
    height: 525px;
    width: 151px;
    float: left;
    }
    #pictureBox {
    margin: 0px;
    padding: 0px;
    float: left;
    height: 240px;
    width: 592px;
    }
    #contentBox {
    margin: 0px;
    padding: 5px 0px 0px 10px;
    height: 275px;
    width: 570px;
    text-align: left;
    float: left;
    }
    #highlightedOne {
    width: 140px;
    height: 65px;
    margin: 0px 0px 10px;
    padding: 0px;
    font: normal 12px Georgia, "Times New Roman", Times, serif;
    color: #000000;
    text-decoration: none;
    }
    #highlightedTwo {
    margin: 0px 0px 10px;
    padding: 0px;
    height: 65px;
    width: 140px;
    font: normal 12px Georgia, "Times New Roman", Times, serif;
    color: #000000;
    text-decoration: none;
    }
    #highlightedThree {
    margin: 0px;
    padding: 0px;
    height: 65px;
    width: 140px;
    font: normal 12px Georgia, "Times New Roman", Times, serif;
    color: #000000;
    text-decoration: none;
    }
    #seperatorOne {
    margin: 0px;
    padding: 0px;
    height: 18px;
    width: 140px;
    background: url(../Images%20Folder/Seperator.gif) no-repeat center center;
    }
    #brochureBox {
    margin: 0px;
    padding: 0px;
    height: 150px;
    width: 140px;
    background: url(../Images%20Folder/BrochureIcon.png) no-repeat left top;
    font: normal 16px/normal Georgia, "Times New Roman", Times, serif;
    color: #000000;
    text-decoration: none;
    text-align: left;
    }
    #seperatorTwo {
    margin: 0px;
    padding: 0px;
    height: 18px;
    width: 140px;
    background: url(../Images%20Folder/Seperator.gif) no-repeat center center;
    }
    #mapBox {
    margin: 0px;
    padding: 0px;
    height: 115px;
    width: 140px;
    background: url(../Images%20Folder/MapIcon.png) no-repeat left top;
    font: normal 14px/normal Georgia, "Times New Roman", Times, serif;
    color: #000000;
    text-decoration: none;
    }
    .highlightHead {
    font: bold 15px Verdana, Arial, Helvetica, sans-serif;
    color: #006600;
    text-decoration: none;
    text-align: left;
    }
    .boldText {
    font: bold 22px Verdana, Arial, Helvetica, sans-serif;
    color: #006600;
    text-decoration: none;
    text-align: left;
    }
    .largerText {
    font: bold 15px Georgia, "Times New Roman", Times, serif;
    color: #000000;
    text-decoration: none;
    text-align: left;
    }
    p {
    font: 12px Georgia, "Times New Roman", Times, serif;
    color: #000000;
    text-decoration: none;
    }
    #highlightedOne p {
    font: 12px Georgia, "Times New Roman", Times, serif;
    color: #000000;
    margin: 0px;
    padding: 0px;
    text-align: left;
    }
    #highlightedTwo p {
    font: 12px Georgia, "Times New Roman", Times, serif;
    color: #000000;
    margin: 0px;
    padding: 0px;
    text-align: left;
    }
    #highlightedThree p {
    font: 12px Georgia, "Times New Roman", Times, serif;
    color: #000000;
    margin: 0px;
    padding: 0px;
    text-align: left;
    }
    #brochureBox p {
    font: 13px Georgia, "Times New Roman", Times, serif;
    color: #000000;
    margin: 0px;
    padding: 0px;
    text-align: left;
    }
    #mapBox p {
    font: 13px Georgia, "Times New Roman", Times, serif;
    color: #000000;
    margin: 0px;
    padding: 0px;
    text-align: left;
    }
    #contentBox p {
    font: 12px Georgia, "Times New Roman", Times, serif;
    color: #000000;
    margin: 0px;
    padding: 0px;
    text-align: left;
    }
    #navcontainer {
    padding: 4px 0px 0px 7px;
    }
  2. #2
  3. Recovering Intellectual
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2006
    Location
    Orange County, CA
    Posts
    1,304
    Rep Power
    789
    hmm ... ok lets take this one thing at a time shall we?

    1. post the link to the site instead of posting ALL the markup and the ENTIRE stylesheet

    2. Find and isolate specific issues. Im not going to take the time to find the faults, thats your job.
    Bugs that go away by themselves come back by themselves
    Beware - your loyalty will not be rewarded
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed forums, Jay.

    In addition to what Matt said...

    1) To help you write posts that will make us better able to help you, I suggest you read Guidelines and Suggestions for Posting on Web Development Forums.

    2) Which doctype are you using?

    3) I suggest you read Writing Efficient CSS.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. Since 439000000
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2004
    Location
    Canada
    Posts
    1,132
    Rep Power
    127
    Seems funny noone mentioned [code ]code goes here. take out the spaces before the "]"[/code ]

    Also, I have a little suggestion, using IE condition statments. It looks like a HTML comment to everything else but IE sees it as special Syntax. You could put a css file with corrects for IE after the regular <link /> for everything else.
    Last edited by acidfourtyfive; March 8th, 2007 at 04:53 PM.

IMN logo majestic logo threadwatch logo seochat tools logo