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 11
  1. #1
    Junior Member
    Join Date
    Dec 2008
    Posts
    14
    Member #
    17944
    Please help! I am designing a new website for my photography business and I have hit some roadblocks. The layout that I have appears fine in Firefox but not Internet Explorer, how do I get it to appear the way it should in all web browsers? Also, on pages such as the Packages page, since the div area is positioned against the menu on the left, the menu does not function on the submenus. How do I get this to work as well? Visit the website HERE

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Look into your margin and padding settings in your CSS. That's usually the problem with IE layout. Also, do a Google Search for IE Box Model Hack to find a work-around.

  4. #3
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    Hey...
    Well as you know and have found out
    IE and Firefox treat the "box model" differently.

    What I do is I usually design for firefox, once its done i apply the IE stylesheet using conditional comments. I think its supported down to IE5. Anyways,
    HTML Code:
    <head>
    <link rel="stylesheet" href="stylesheets/style.css"/>
    <!--[if IE 7]>
    <link rel="stylesheet" href="stylesheets/styleIE7.css"/>
    <![endif]-->
    </head>
    Firefox does not parse the 2nd stylesheet because it is commented, however
    Internet explorer will. You can just override certain settings in your styleIE7.css.

    For example
    stylesheet.css
    p.text{
    color: black;
    }

    ie7style.css
    p.text{
    color: red;
    }

    This should display in red in IE7 and black in Firefox.
    You could use this to override certain margin and padding settings in IE7.

    Cross browser CSS is horrible
    Hope I helped a bit.

  5. #4
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    Site looks great by the way. very professional and warm/cozy

  6. #5
    Junior Member
    Join Date
    Dec 2008
    Posts
    14
    Member #
    17944
    Quote Originally Posted by aburningflame
    Site looks great by the way. very professional and warm/cozy
    Thanks a lot! I will try your recommendations. The other problem I am having is getting my div tags correct, per say so they do not interfere with the menu on the left. if i have a div that is positioned right against the menu then it disables the ability to click on the sub-menu options.

  7. #6
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    Hmm the whole sub-menu thing im not quite sure how to go about fixing.
    The simple solution would be to push your apDiv3 further right to clear the submenus and maybe incorporate a nice filler graphic to occupy the whitespace? Not sure how you feel about that, but it would probably work.
    You seem to know how z-index works...so do the sub menu divs have greater integers than the z-index of the div your placing to its right? Also for z-index to take effect the sub menu divs would have to be positioned(i.e absolute).
    Lemme know if this works for you
    Good luck

  8. #7
    Junior Member
    Join Date
    Dec 2008
    Posts
    14
    Member #
    17944
    Quote Originally Posted by aburningflame
    Hmm the whole sub-menu thing im not quite sure how to go about fixing.
    The simple solution would be to push your apDiv3 further right to clear the submenus and maybe incorporate a nice filler graphic to occupy the whitespace? Not sure how you feel about that, but it would probably work.
    You seem to know how z-index works...so do the sub menu divs have greater integers than the z-index of the div your placing to its right? Also for z-index to take effect the sub menu divs would have to be positioned(i.e absolute).
    Lemme know if this works for you
    Good luck
    Thanks for the insight! I just upgraded to a Mac from a Windows PC so I am waiting to get Dreamweaver again before I continue work on the site. I will definitely check out the z-index and make sure that works. I am sure that will fix the problem with the menu. I also need to make the layout work in all browsers. I have posted my concerns about my site on other forums as well and apparently my code is a complete mess with the layout itself. Any ideas on how I can clean it up and position things correctly so it displays correctly in Firefox, IE, and Safari?

  9. #8
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    Ye, I havent really used dreamweaver at all.
    Anyways in terms of complete mess what do they mean?
    Not following standards? Not organized properly?
    Biggest tip: USE GOOD NAMES.
    style1 is not a very good name if you ask me.
    blue10pxText would be better imo....maybe it's just me but I like this 2nd one better.

    Cleaning up css you can use comments Example
    /*--POSITION DIVS--*/
    #div1{}
    #div2{}

    /*--TEXT FORMATTING--*/
    p.style1{}
    p.style2{}
    In terms of keeping HTML clean, Ive recently been validating against the
    XHTML 1.0 Strict DND (search for html validation and its on the W3C site) and this helps seperate structural logic from the presentation aspect.
    One thing I read somewhere is that if you see
    position: relative; position: absolute;
    a lot, it means that person doesnt really know what theyre doing. Let stuff be positioned statically(default positioning or position: static) unless you have a reason to position it differently.
    (Im not to sure about this but it has worked)
    Also for cross browser compatibility.
    Put everything into a wrapper div
    and make that div a certain width.
    Example:
    HTML Code:
    <div id="wrapperDiv">
    <?php include "header.php";?>
    <?php include "leftNav.php";?>
    <div id="contentDiv">
    </div>
    <?php include "footer.php";?>
    </div>
    #wrapperDiv{
    width: 800px;
    height: 680px;
    margin: 0px auto;
    }
    Anyways sorry this is a long post but its hard to explain without it being long.
    From what I understand say you place a div inside wrapperDiv and you wanna push it over 30px, you could use:
    position: relative;
    left: 30px;
    Im not sure this is 100% correct and all...but take a look at www.scottmoniz.com I had issues with cross browser compat and fixed them all. (IE7, Chrome, Firefox)
    You can view source and check out the stylesheet too:
    www.scottmoniz.com/stylesheets/style.css
    Gluck!

  10. #9
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    Read this
    http://www.w3schools.com/Css/pr_class_position.asp
    Might help you with positioning.
    But having a div with a fixed-width helps for different resolutions.
    And also a wrapper div helps for browser resizes and all that stuff.
    Anyways,
    Hope I helped about, Im still very new to CSS-P.

  11. #10
    Junior Member
    Join Date
    Dec 2008
    Posts
    14
    Member #
    17944
    Quote Originally Posted by aburningflame
    Read this
    http://www.w3schools.com/Css/pr_class_position.asp
    Might help you with positioning.
    But having a div with a fixed-width helps for different resolutions.
    And also a wrapper div helps for browser resizes and all that stuff.
    Anyways,
    Hope I helped about, Im still very new to CSS-P.
    I am very new to CSS also as you can tell. I have a container...isn't that similar to a wrapper div? I am just having a hard time getting all of my div's that contain the content positioned correctly inside the container so they stay put when the browser is resized and also so they stay put in different browsers. I will definitely check out the links you provided! Thanks a lot for your help!


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 09:28 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com