SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 39
  1. #1
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hard time with 2 column layout with faux column

    This is the site where I'm testing out a 2 column layout with a faux column. Problem is the content area div is shifted down in IE 6+7, just passed the navigation bar, and I don't want it to be because I want it to look the same across all browsers. Would someone here be willing to work with me to get this to look the same across all browsers? (mainly IE 6+7, Safari, Firefox) Thanks because I've been struggling with this for days now and I'm at a standstill.


    CSS code for lavabarrestaurant.com/test

    Code:
    #wrapper{
    	margin-right: auto;
    	margin-left: auto;
    	width: 982px;
    	position: relative;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	text-align: left;
    }
    #header{
    	margin: 0px;
    	padding: 0px;
    	height: 297px;
    	width: 982px;
    	background-image: url(images/header_bg_03.gif);
    	background-repeat: no-repeat;
    	min-height: 297px;
    }
    #header_right_bg{
    	background-image: url(images/images/header_bg_03.gif);
    	text-align: right;
    	min-height: 297px;
    	color: #FFFFFF;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	margin-left: 265px;
    	padding-right: 50px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    	background-repeat: no-repeat;
    	margin-top: -297px;
    	height: 297px;
    }
    #nav_bar{
    	float: left;
    	width: 241px;
    	top: 0px;
    	padding: 0px;
    	margin: 0px;
    	height: auto;
    	background-image: url(images/layout1wslices_22.gif);
    	background-repeat: repeat-y;
    }
    #content_area{
    	background-image: url(images/layout1wslices_08_new.gif);
    	width: 741px;
    	max-width: 741px;
    	min-height: 607px;
    	background-repeat: repeat-y;
    	position: relative;
    	padding-top: 25px;
    	padding-right: 39px;
    	padding-bottom: 39px;
    	padding-left: 39px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 241px;
    }
    #footer{
    	width: 981px;
    	height: 69px;
    }
    body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	text-align: center;
    	background-image: url(images/main_bg.gif);
    	background-repeat: repeat-x;
    
    }
    .style3 {font-size: 14px}
    .style6 {
    	font-size: 24px;
    	font-weight: bold;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    .style7 {
    	font-size: 16px;
    	font-weight: bold;
    }
    .style1 {color: #FF0000}
    .style8 {color: #000000}
    .style9 {font-size: 21px}
    .style10 {font-size: 21px; font-weight: bold; }
    
    #nav_content_wrapper{
    	background-image: url(images/nav_content_bg.gif);
    	background-repeat: repeat-y;
    	overflow: hidden;
    	
    }
    #nav_highlight{
    	background-image: url(images/layout1wslices_23.gif);
    	height: 324px;
    	background-repeat: repeat-y;
    	position: static;
    	margin-top: -324px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    }

  2. #2
    SitePoint Zealot
    Join Date
    Nov 2008
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you post a link? Would make things a lot easier.

  3. #3
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had it right next to "CSS code" at the top. I just joined the forum so it wouldn't let me post a real link with a "www"

    lavabarrestaurant.com/test

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The problem is #content_area. It ahs a width just big enoguh, but then you add in huge margins nad paddnigs. Try these updated styles
    Code:
    #content_area
    {
    float:left;/*float it*/
    margin-left:0;/*remmove the 141px margin*/
    padding:25px 0 39px 35px;/*change padding*/
    width:705px;/*lower width*/
    }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow I believe that fixed that issue. now the only other thing is i have a highlight that should be at the bottom of the navigation bar faux column at all times. It's showing up in different spots on each page in IE and not even showing up in FF. There's also little spaces above and below the navigation bar? do you know why this is happening? Thanks alot for that help!

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Im' a bit stressed out right now but a quick fix is this
    Code:
    * html #nav_content_wrapper{margin-top:-4px;}
    I'll take another look tomorrow

    And I don't see the highlight you are talking about..?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yea the highlight isnt showing up in Firefox but it does in IE at the bottom of the left column. Thanks

  8. #8
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually that quick fix kinda fixes the issue but not quite...because when you full screen the browser it puts the black strip across the top out of alignment in Firefox. I appreciate the help.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Alright, something from #header_right_bg is making the height more then 297px

    To fix this just add this code in
    Code:
    #nav_content_wrapper{margin:0;}
    * html #header{overflow:hidden;}
    The margin:0; was to remove the 4px margin I told you in my previous post. The overflow:hidden; is to make it obey the height.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i did that and it helped...but I'm still having issues in IE with the nav_highlight thats supposed to be fixed to the bottom of the navigation bar faux column. It doesn't show up in Firefox but shows up in weird spots in IE. Any idea whats wrong here?

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Give it a width (and I would position:absolute;bottom:0;left:0 it too. Remove the negative top margin (Why do you have it???)

    And you need to give the #nav_content_wrapper a position:relative; to start a new stacking context.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok I did that but now it looks fine in Firefox but IE isn't looking right at all. The content area is missing now...and the nav highlight and faux column is not there. any idea?

    Code:
    #wrapper{
    	margin-right: auto;
    	margin-left: auto;
    	width: 982px;
    	position: relative;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	text-align: left;
    }
    #header{
    	margin: 0px;
    	padding: 0px;
    	height: 297px;
    	width: 982px;
    	background-image: url(images/header_bg_03.gif);
    	background-repeat: no-repeat;
    	min-height: 297px;
    	overflow: hidden;
    }
    #header_right_bg{
    	background-image: url(images/layout1wslices_04.gif);
    	text-align: right;
    	min-height: 297px;
    	color: #FFFFFF;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	margin-left: 265px;
    	height: 297px;
    	top: -297px;
    	position: relative;
    	padding-top: 0px;
    	padding-right: 50px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    	background-repeat: no-repeat;
    }
    #nav_bar{
    	float: left;
    	width: 241px;
    	top: 0px;
    	padding: 0px;
    	margin: 0px;
    	height: auto;
    	background-image: url(images/layout1wslices_22.gif);
    	background-repeat: repeat-y;
    }
    #content_area{
    	background-image: url(images/layout1wslices_08_new.gif);
    	width: 705px;
    	max-width: 741px;
    	min-height: 607px;
    	background-repeat: repeat-y;
    	position: relative;
    	padding-top: 25px;
    	padding-right: 0px;
    	padding-bottom: 39px;
    	padding-left: 35px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	float: left;
    }
    #footer{
    	width: 981px;
    	height: 69px;
    }
    body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	text-align: center;
    	background-image: url(images/main_bg.gif);
    	background-repeat: repeat-x;
    
    }
    .style3 {font-size: 14px}
    .style6 {
    	font-size: 24px;
    	font-weight: bold;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    .style7 {
    	font-size: 16px;
    	font-weight: bold;
    }
    .style1 {color: #FF0000}
    .style8 {color: #000000}
    .style9 {font-size: 21px}
    .style10 {font-size: 21px; font-weight: bold; }
    
    #nav_content_wrapper{
    	background-image: url(images/nav_content_bg.gif);
    	background-repeat: repeat-y;
    	overflow: auto;
    	position: relative;
    }
    #nav_highlight{
    	background-image: url(images/layout1wslices_23.gif);
    	min-height: 324px;
    	height: 324px;
    	background-repeat: repeat-y;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	position: absolute;
    	width: 241px;
    	left: 0px;
    	bottom: 0px;
    }

  13. #13
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any ideas?

  14. #14
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry I should point out that it looks wrong in IE 6.0....IE 7.0 looks fine. What would I need to do to get it to look right in IE 6.0?

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Update the styles. The background wasn't displaying because of haslayout, and the image was really weird. It has a problem with position:absolute. Probably some stacking bug. Whatever
    I have a workaround for IE6
    Code:
    * html #nav_content_wrapper
    {
    	height:1%;/*Haslayout to display the background*/
    }
    * html #nav_highlight
    {
    	position:static;/*IE6 doesn't like positoin:absoltue here for some reason*/
    	margin-top:-300px;/*Move it up*/
    }
    Sorry I missed this thread somehow lol. I must have unsubscribed or something. Don't know how though lol.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  16. #16
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey ryan you've been alot of help. The only thing I can't seem to figure out now is that when I have a page with content that does not extend passed the navigation bar the page doesn't respond to the min-height css code for the content area. You can see it in action here in IE 6

    lavabarrestaurant.com/about.php

    Any help would be appreciated

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    That's because min-height isn't supported in IE6 and down (btw, never set height and min-height on the same element to browsers because all you will ever get is the height:

    Just set a min-height for normal browsers, and then height:; for IE6 and down. Example:
    Code:
    #elementHere
    {
      min-height:400px;/*good browsers*/
    }
    * html #elementHere
    {
      height:400px;/*IE6 down treats this as min-height..almost*/
    }
    In short, IE6 wasn't using the min-height to begin with-it's just that the content on the page made it seem like it was .

    And your welcome .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  18. #18
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not sure where I'm supposed to put both of these codes since your saying you can't have both on the same div?

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I misspoke. Lets look at your code
    Code:
    #header{
    	margin: 0px;
    	padding: 0px;
    	height: 297px;
    	width: 982px;
    	background-image: url(images/header_bg_03.gif);
    	background-repeat: no-repeat;
    	min-height: 297px;
    	overflow: hidden;
    }
    Every browser that understands min-height and height (all but IE6 and down) will completely ignore the min-height statement and will just use the height property you have set. If you remove the height:297px from the above code you will see min-height starting to work!

    Now Ie6 will act as if the min-height isn't there (because min-height is not recognized by IE6. It acts as if it isn't there. Rewrite your #header section to be like this
    Code:
    #header{
    	margin: 0px;
    	padding: 0px;
    	width: 982px;
    	background-image: url(images/header_bg_03.gif);
    	background-repeat: no-repeat;
    	min-height: 297px;
    	overflow: hidden;
    }
    * html #header
    {
      overflow:visible;
      height:297px;
    }
    With good browsers, min-height and oveerflow:hidden acts a bit differnet with height and overflow:hidden.

    With height and overflow:hidden; it will completely cut off the content once the height is set.

    With min-height and overflow:hidden; it will contain the floats (as it does with height; but the content can expand.

    IE6 treats height as min-height (as long as overflow isn't set to allow expansion). You had overflow:hidden; on #header, which is why I put overflow:visible; on the code to select IE6 down.

    You may think, well now IE6 won't contain the floats because overflow isn't set. IE does that by nature when invoked with haslayout (the height does that) so you don't have to worry about that. It's a very good setup IMO.

    That should get you started. I gave a good explanation I think .

    You just need to do it for everywhere.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  20. #20
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    * html #header
    {
      overflow:visible;
      height:297px;
    }
    i dont understand what this is exactly? what is * html # header?

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Thta selects IE6 down (via the star selector hack, aka * html) and because it doesn't support min-height we feed IE6 down the height property (they treat it the same as min-height basically anyway) and we reset the overflow to visible to allow expansion.

    I explained this in the last post.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  22. #22
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #wrapper{
    	margin-right: auto;
    	margin-left: auto;
    	width: 982px;
    	position: relative;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	text-align: left;
    }
    #header{
    	margin: 0px;
    	padding: 0px;
    	width: 982px;
    	background-image: url(images/header_bg_03.gif);
    	background-repeat: no-repeat;
    	min-height: 297px;
    	overflow: hidden;
    }
    * html #header
    {
      overflow:visible;
      height:297px;
    }
    #header_right_bg{
    	background-image: url(images/layout1wslices_04.gif);
    	text-align: right;
    	min-height: 297px;
    	color: #FFFFFF;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	margin-left: 265px;
    	height: 297px;
    	top: -297px;
    	position: relative;
    	padding-top: 0px;
    	padding-right: 50px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    	background-repeat: no-repeat;
    }
    #nav_bar{
    	float: left;
    	width: 241px;
    	top: 0px;
    	padding: 0px;
    	margin: 0px;
    	height: auto;
    	background-image: url(images/layout1wslices_22.gif);
    	background-repeat: repeat-y;
    }
    #content_area{
    	background-image: url(images/layout1wslices_08_new.gif);
    	width: 705px;
    	max-width: 741px;
    	min-height: 607px;
    	background-repeat: repeat-y;
    	position: relative;
    	padding-top: 25px;
    	padding-right: 0px;
    	padding-bottom: 39px;
    	padding-left: 35px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	float: left;
    }
    #footer{
    	width: 981px;
    	height: 69px;
    }
    body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	text-align: center;
    	background-image: url(images/main_bg.gif);
    	background-repeat: repeat-x;
    
    }
    .style3 {font-size: 14px}
    .style6 {
    	font-size: 24px;
    	font-weight: bold;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    .style7 {
    	font-size: 16px;
    	font-weight: bold;
    }
    .style1 {color: #FF0000}
    .style8 {color: #000000}
    .style9 {font-size: 21px}
    .style10 {font-size: 21px; font-weight: bold; }
    
    #nav_content_wrapper{
    	background-image: url(images/nav_content_bg.gif);
    	background-repeat: repeat-y;
    	overflow: auto;
    	position: relative;
    	height:1%;/*Haslayout to display the background*/
    
    }
    #nav_highlight{
    	background-image: url(images/layout1wslices_23.gif);
    	min-height: 324px;
    	height: 324px;
    	background-repeat: repeat-y;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	width: 241px;
    	left: 0px;
    	bottom: 0px;
    	position:static;/*IE6 doesn't like positoin:absoltue here for some reason*/
    	margin-top:-300px;/* Move it up */
    }
    hmm..the new header code you gave me is making a big space between the top of the navigation bar and content area in both IE 6 and FF on windows. Also in FF the nav_highlight isnt there anymore. What happened exactly? Thanks alot for the help man, I really do appreciate it. If there's anything I can help you out with, let me know.

    Check the link --> lavabarrestaurant.com/test

  23. #23
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    First of all-I gave you code to put #nav_highlight position:static for IE6 only. Why are you ignoring my answers? The other browsers need position:absolute;.

    If you take that CSS you just posted. To get #nav_highlight showing, add this in
    Code:
    html>body #nav_highlight{position:absolute;}
    That selects all browsers besides IE6. If you don't wnat to add that in then just read post 15...

    As for the big space, it can be fixed by using tihs CSS
    Code:
    #header img.thing
    {
    	float:left;
    }
    #header_right_bg
    {
    	top:0;/*this was moving it out of view*/
    }
    The img.thing is this image (I added the class in the HTML)
    Code:
    <div id="header">
    	    <img src="images/layout1wslices_03.gif" width="265" height="297" class="thing" />
     <div id="header_right_bg"><span class="style2">Lava Restaurant<br />
    Bar and Brick Oven<br />
    344 French Hill Rd.<br />
    Wayne, NJ 07470<br />
    (973) 696-9440<br />
    (973) 696-2048<br />
    <a href="mailto:lava344@gmail.com" class="style1">lava344@gmail.com</a> </span></div> </div>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  24. #24
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry I think that whole * html thing threw me off and didn't quite understand what I was doing with that. I'm gonna give this a go. Thanks again.

  25. #25
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's baasically just a way to select IE6 down only. The html>body selects all browsers BUT IE6 and down. Idealy you should be selecting the crappy browsers (aka IE6 and down) that way once you stop support you can delete the code for them.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

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