Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Junior Member
    Join Date
    Jul 2009
    Posts
    4
    Member #
    19419
    Hi, I'm Beth... new to the site, need some help.

    I'm designing a website for a local pizza place... and I'm having some problems with one page in particular. www.marianospizza.com/menu.html is the address to view it... basically, in firefox, the page looks great... on IE, however, the middle part of the menu goes below the other two parts and it looks horrible. I'm new to using CSS for layouts... I'm used to using HTML tables for layouts way back before CSS was the norm... can anyone help me fix this problem? I want the page to look how it looks in the firefox browser, not how it looks in the IE browser.

    It's frustrating!! lol

  2.  

  3. #2
    Junior Member WebPrezentacija's Avatar
    Join Date
    Jul 2009
    Location
    Novi Sad, Serbia
    Posts
    25
    Member #
    19405
    Liked
    1 times
    beth4ever89,

    Your <div id="specpizza"> is without any floating in css file. You have to float to the leftward one to another all three div-s. Itís best to arrange them in the following order.

    <div id="pizza">
    <div id="specpizza">
    <div id="allelse">

    float: left;

  4. #3
    Junior Member
    Join Date
    Jul 2009
    Posts
    4
    Member #
    19419
    well, the div pizza has a float: left; property, and the "allelse" div has a "float: right;" property... the div specpizza needs to be in the middle, I don't want it to float left, which is why it isn't a floating element

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    Beth ...

    Here's my shot at it:

    http://www.catpin.com/pizza

    I took the idea that you will want to be able to change content without
    worrying about the height. It will stretch all 3 columns regardless.

    Because of the funky CSS float/height problem, I'm utilizing the famous
    "clearfix" method to trick the browsers.

    View my HTML and CSS files (source) to see how it's done.

    Note that I float all 3 sections "left" and inserted a "wrapper" to contain them.
    It's the wrapper that uses the "clearfix" class to adjust the height.
    The wrapper has the grayish background, and the other 3 <div>'s are transparent.


  6. #5
    Junior Member WebPrezentacija's Avatar
    Join Date
    Jul 2009
    Location
    Novi Sad, Serbia
    Posts
    25
    Member #
    19405
    Liked
    1 times
    beth4ever89,

    <div id="specpizza"> without any floating tends to go down, under <div id="pizza">. There is only left or right floating, there is no third solution.

  7. #6
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    I think the reason some designers leave that middle with no float is because they want the content to flow up into the middle. You have them in the right order, but I'm not sure about adding a width to that. If your going to add a width, then it should be floated. Generally this type of layout is for text only in the middle.

    The reason for IE differences is going to be margins and padding calculations, as usual. You need to play with the width so it works in IE and then use an IE stylesheet.

    Anyways, I tried to take the width off the middle, but I lost the right border. I tried to add that border to the left side of to the "allelse" div, but firebug won't let me do it for some reason. So you might try that.

    Soooo... IE is probably going to need its own stylesheet and that will probably fix it.

  8. #7
    Junior Member WebPrezentacija's Avatar
    Join Date
    Jul 2009
    Location
    Novi Sad, Serbia
    Posts
    25
    Member #
    19405
    Liked
    1 times
    aeroweb99,

    IE donít need separate own css file. Web page has itís own width in px, so it should be calculated widths of 3 divs,

    <div id="pizza">
    <div id="specpizza">
    <div id="allelse">

    nothing else. Mentioned divs should be spaced evenly across horizontal width of page and thatís all, nothing else. There is another method to solve this, but it uses with liquid layout.

  9. #8
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Mentioned divs should be spaced evenly across horizontal width of page and thatís all, nothing else. There is another method to solve this, but it uses with liquid layout.
    The fact that you have widths, padding, and margins, doesn't guarantee anything with IE. As mentioned, if your having problems with IE, then you will need IE margin and padding fixes.That's all, nothing else.

  10. #9
    Junior Member
    Join Date
    Jul 2009
    Posts
    4
    Member #
    19419
    Okay, this is going to sound dumb, but keep in mind, I'm new at CSS...

    how do I view CSS files through view source? I can see the HTML/XHTML... but I have no clue how to view the CSS when it's in a stylesheet.

    And how would I make a separate stylesheet for just IE browsers? I know how to use multiple stylesheets for a website, but I don't know how to make just an IE stylesheet for the same page.

  11. #10
    Junior Member
    Join Date
    Jul 2009
    Posts
    4
    Member #
    19419
    Nevermind about the viewing css... lol... that was a no-brainer, I figured it out ^.^; but still confused on the IE stylesheet.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:46 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com