Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    IE needs your assistance.

    I am working on this site. It is my first official site.


    As of now the XHTML and CSS is validated with the W3 Org. In Dreamweaver CS4, I fixed the two simple browser compatibility issues with IE 6 and under.



    I can't get the Div's to stay laid out like they do in Firefox in IE 7.

    Help?



    Here is the site.
    http://www.biggunrotts.com/


    Thanks for the help!

    -Adam
    Last edited by A_Grant; 02-28-2009 at 08:39 PM.

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Ok Adam what happen was you added a float with out choosing a display:

    try adding this and tell me if it helps

    Code:
    .indexbodycontainerleft {
    	display:block;
    	float: left;
    	height: 500px;
    	width: 450px;
    }
    Alot of your code is missing display's

    and in ur navcontainer replace it with this

    Code:
    .navcontainer {
    	display:block;
    	float: left;
    	height: 46px;
    	width: 943px;
    }
    Last edited by PitbullMean; 02-28-2009 at 05:40 AM.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #3
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Anyway I'm confident that it is now fixed,

    Heres all the fixes.

    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    
    
    body {
    	background-repeat: repeat-x;
    	font-family: Arial, Helvetica, sans-serif;
    	font-style: normal;
    	font-weight: lighter;
    	background-image: url(images/header_repeat-x.png);
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-left: 0px;
    	margin-bottom: 0px;
    }
    
    
    
    td img {display: block;}
    
    .bodycontainer {
    	width: 943px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-left: auto;
    	height: auto;
    }
    
    .toprightcontainer {
    	display:block;
    	float: right;
    	height: 155px;
    	width: 620px;
    }
    .topleftcontainer {
    	display:block;
    	float: left;
    	width: 323px;
    	height: 155px;
    }
    .logo {
    	height: 53px;
    	width: 323px;
    	margin-top: 63px;
    	margin-bottom: 41px;
    	background-image: url(images/BGRlogo.gif);
    }
    .slogan {
    	height: 24px;
    	width: 186px;
    	margin-top: 103px;
    	margin-bottom: 28px;
    	margin-left: 434px;
    	background-image: url(images/slogan.gif);
    }
    .navcontainer {
    	display:block;
    	float: left;
    	height: 46px;
    	width: 943px;
    }
    .navbar {
    	height: 36px;
    	width: 943px;
    	margin-top: 1px;
    	margin-bottom: 9px;
    }
    .footercontainer {
    	height: 200px;
    	width: 100%;
    	clear: left;
    	background-image: url(images/footer_repeat-x.png);
    	background-repeat: repeat-x;
    	margin-bottom: 0px;
    	margin-right: 0px;
    	margin-left: 0px;
    	margin-top: auto;
    }
    .footerbodycontainer {
    	height: 200px;
    	width: 943px;
    	margin-right: auto;
    	margin-left: auto;
    }
    .indexbodycontainerleft {
    	display:block;
    	float: left;
    	height: 500px;
    	width: 450px;
    }
    .indexbodycontainerright {
    	display:block;
    	float: right;
    	height: 500px;
    	width: 493px;
    }
    .indexrottimage {
    	height: 275px;
    	width: 450px;
    	margin-top: 15px;
    	margin-bottom: 260px;
    }
    .indexintrotext {
    	margin-top: 15px;
    	height: 275px;
    	margin-bottom: 260px;
    	margin-left: 10px;
    }
    .footerbodyleftcontainer {
    	display:block;
    	float: left;
    	height: 200px;
    	width: 400px;
    }
    .footerbodyrightcontainer {
    	display:block;
    	float: right;
    	height: 200px;
    	width: 543px;
    }
    .indexintrotexttop {
    	height: 35px;
    }
    .indexintrotextbot {
    	height: 240px;
    }
    .footernewsheader {
    	height: 45px;
    	width: 400px;
    	margin-top: 10px;
    	background-image: url(images/footer_images/news.png);
    	background-repeat: no-repeat;
    	background-position: left top;
    }
    .footernews {
    	height: 130px;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #FFF;
    	font-size: 16px;
    	width: 400px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 15px;
    	margin-left: 0px;
    }
    .footercontactbox {
    	height: 175px;
    	width: 453px;
    	margin-left: 75px;
    	margin-top: 10px;
    	margin-bottom: 15px;
    	margin-right: 15px;
    	border: thin solid #FFF;
    	background-image: url(images/footer_images/contactus.png);
    	background-repeat: no-repeat;
    	background-position: left top;
    }
    .footercontactinfotop {
    	margin-top: 45px;
    	height: 110px;
    }
    .footercontactinfobottom {
    	height: 20px;
    	margin-left: 10px;
    }
    a:link {
    	color: #FFF;
    	text-decoration: underline;
    }
    a:visited {
    	color: #999;
    }
    a:hover {
    	color: #FFF;
    	text-decoration: underline;
    	background-color: #999;
    }
    Last edited by PitbullMean; 02-28-2009 at 05:47 AM.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • Users who have thanked PitbullMean for this post:

    A_Grant (03-01-2009)

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Hi A_Grant, do you know why tables for layout is stupid?

    @PitbullMean, giving a float itself will make an element behave like a block level element. So I don't think that an explicit display:block; is required there.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    The fix worked thats all that matters
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #6
    New Coder
    Join Date
    Feb 2009
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I am aware that using tables as the base of the page isn't smart..

    That's why I didn't do it?



    I am having a bit of an issue understanding your post if I didn't use a table to layout my page.

    The only table in my page is the table written by Fireworks for the nav bar, but it is contained in yet another div, so that isn't an issue.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello A_Grant,
    I think ab may be refering to your table menu. Just because it's in it's own div doesn't mean it's not a table, it's still a table being used for layout.
    No matter, it works for you and that's just fine. If you're interested, that's a very simple table free menu to do, see this example - http://nopeople.com/CSS/anotherNavBar/index.html


    Your page has other issues though.
    You have the entire page wrapped in .bodycontainer but it's not working. Put a background color on it and you can see what I'm talking about, like this:
    Code:
    .bodycontainer {
    	width: 943px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-left: auto;
    	height: auto;
    background: #000;
    }
    Now, if you clear your floats, you will see the div expand to wrap your content. Read about clearing floats here - http://www.quirksmode.org/css/clearing.html
    ...like this:
    Code:
    .bodycontainer {
    	width: 943px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-left: auto;
    	height: auto;
    overflow: auto;
    background: #000;
    }
    A two column layout usually only has one float. display:block; isn't needed on either one of them. Have a look at one method 2-column layouts are coded
    In that example the left column is float:left; and the right column is margin-left the width of the left column.
    Last edited by Excavator; 02-28-2009 at 09:10 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    A_Grant (02-28-2009)

  • #8
    New Coder
    Join Date
    Feb 2009
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I added the color like you said..

    It seems to be working as I wanted?



    The only thing I am using the .bodycontainer for is the "auto" left and right margins, and it is doing just as I wanted it to.


    Thank you for your help, I will make sure to re-make my menu with the CSS method.


    As for the two column method, there are certain parts of my site (currently unpublished) that use more than two vertical columns.



    Also, if the the "display:block" isn't needed then how did it fix my IE issue?




    Ahhh! I wish I understood CSS better.



    Thanks for helping a beginner take his first baby steps.

    -Adam

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by A_Grant View Post

    The only thing I am using the .bodycontainer for is the "auto" left and right margins, and it is doing just as I wanted it to.
    I understand what your .bodycontainer is doing. By clearing your floats and making the code work properly you can avoid other problems. For one example, I know the guilotine bug can affect an uncleared float.

    Have a look a good IE6 bug list and their fixes - http://www.positioniseverything.net/explorer.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Feb 2009
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Alright, I will check it out.

    I am also having this other problem.. I can post a new thread, but if you're willing to help I can just post it here.



    I think it's a javascript issue, but it is really strange.



    I'll tell you what the little issue is, and if you don't mind helping, I will post the code.

    Issue:

    I made two simple gif images. Left arrow and a right arrow. When using one of these arrow's as the link to change the slideshow, it complete hacks up the entire page when viewing it in dreamweaver.


    This is honestly the strangest thing I have seen in my few months of coding.


    Aha.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I know one thing for sure, don't trust the way DW shows your code. DW is famous for rendering code UN-like any known browser. See the sugestion in my sig about checking your work in FF first?

    As for your problem, anything could be wrong. We have some very smart people in the js forum. I am not one of them... I have not done much coding with js.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    New Coder
    Join Date
    Feb 2009
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    What is the difference in a Div "id" and "class"?

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    An id is more specific but can only be used once on a page.
    Styled like this: #name {}
    And in the markup like this: <div id="name></div>

    A class is a little lower on the level of specificity but can be used as many times as you want on a a page.
    Styled like .name {}
    in the markup like: <div class="name"></div>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #14
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Quote Originally Posted by A_Grant View Post
    What is the difference in a Div "id" and "class"?
    See http://www.htmldog.com/guides/cssintermediate/classid/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    A_Grant (03-01-2009)

  • #15
    New Coder
    Join Date
    Feb 2009
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    @abduraooft

    Thank you, that really did help.



    I would honestly be screwed without this forum.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •