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

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12

    CSS & Div - NS & Opera displaying same problem


    Ok I have this page on a site which lists gig dates for a band.
    I would have used tables before for layout purposes, but I know thats a no-no, so I'm using divs and css.

    As usual it all works fine in one browser (IE (6) in this case) but NS (6 I'm testing on) and Opera (7.11 I'm testing on) are doing something a little strange.

    See these screenshots (the background colours have been altered in the ns CSS file for this example):

    IE screenshot
    NS screenshot

    All the content is created on the fly by a PHP script, here's the basic HTML layout (for gig dates - one still to come and one that has already been played):


    Code:
    <!-- the site borders and main section -->
    <div id="sitewrap">
      <div id="siteleft">&nbsp;</div>
      <div id="siteright">&nbsp;</div>
      <div id="sitemain">
    
    <!-- gigs page titles -->
        <div class="gig">
          <div class="date"><img src="gfx/head_date.gif"></div>
          <div class="comment"><img src="gfx/head_comments.gif"></div>
          <div class="venue"><img src="gfx/head_venue.gif"></div>
        </div>
    
    <!-- gig listing - still to come -->
        <div class="spacer"></div>
        <div class="gig">
          <div class="date">$date</div>
          <div class="comment">$comment</div>
          <div class="venue">$location</div>
        </div>
    
    <!-- gig listing - played gig -->
        <div class="spacer"></div>
        <div class="gig">
          <div class="gone">
    	<div class="date">$date</div>
    	<div class="comment">$comment</div>
    	<div class="venue">$location</div>
          </div>
        </div>
    
    
    <!-- close the "sitemain" div -->
      </div>
    <!-- close the "sitewrap" div -->
    </div>
    And heres the CSS for all that:
    Code:
    #sitewrap  { 
      width: 786px; 
      height: 100%;
    	margin-right:auto; 
    	margin-left:auto; 
    	margin-top:0px; 
    	padding:0px; 
    	text-align: left; 
    } 
    
    #siteleft {
    	background: url(gfx/left-border.gif) repeat-y right top;
      float: left;
    	height: 100%;
    	width: 10px;
    }
    
    #sitemain {
    	width: 760px;	height: 100%;
    }
    
    div.spacer {
    	clear: both;
    }
    
    .gig {
    	width: 760px;
    	font-size: 11px; padding-left: 3px; padding-right: 3px; padding-bottom: 1px; vertical-align: top;	
    	background: url(gfx/_line.gif) repeat-x left bottom;
    }
    
    .gig .date {
    	float: left; width: 150px;
    }
    
    .gig .venue {
    	width: 210px;
    }
    
    .gig .comment {
    	float: right;	width: 380px;
    }
    
    .gig .gone {
    	font-size: 11px; color: #999999; font-style: italic;
    }
    Now I already have a seperate style sheet set up for NS and Opera (as they both appear to display the same set of problems) to fix the problems in them - so any neccessary changes could be made to just the NS CSS - unless it's IE that's allowing invalid code (which it could be).

    Thanks in advance.

    -D
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2000
    Posts
    763
    Rep Power
    0
    That might have something to do with IE and its box model being messed up. You might want to have a look here, Box Model Hack
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12
    I don't think its that, as it works in IE (6 anyway) as seen in the screenshots.

    Anyway even when removing the padding, making the divs very small (ie. say 10px each) the same problem still occurs in NS, that's why I'm confused.

    -D
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    14
    Also add float:left to the .gig .venue style

    If this does not help, do you have a URL where this can be seen (or some test data)?

    Hope this helps,
    Jeroen
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12
    Ok adding float: left; to the venue one and removing the spacer div from the output (the one with the clear: both; ) as I assumed that was clearing the main margins - which would account for the problem in NS almost sorts it.

    By almost sorting it I mean that it works fine - until the first comment div that runs onto two lines see:

    2line.gif

    I assume this is because the first two divs in this line are set to float: left; and have one line of data. Setting float: left; to the comment doesn't help.

    -D
    Last edited by DEfusion; June 25th, 2003 at 09:19 AM.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    14
    Wild guess (can't check from here; a URL might help..): add clear:both to .gig

    Jeroen
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12
    No that didn't help.

    Ok I've uploaded it here: www.primaryevasion.com/gigs.php
    I can't guarentee how clean the html output by the php is to read as I don't include /r or /n in the output, but it seems cleaner than some dynamic stuff.

    -D
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12
    Ok maybe this is the problem, I've rearranged things slightly so it goes:

    <div class="gig">
    Then all the gig listings then close that gig div
    </div>

    And that solves the two line comment problem, but I have this set up which I haven't tested on any full content before:

    body {
    text-align: center;
    vertical-align: top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
    height: 100%;
    }

    This is so the side border divs are forced to be the full size of the frame (by setting their height: 100% even when the content doesn't fill the frame. However looking at the online example, NS seems to set this value to only the visible frame when the browser starts... whereas IE includes both the visible frame and any content that is off the page and you can only get to via scrolling.

    Any ideas?

    -D
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12
    Thankyou for your help, I have it figured out now, I think.

    I know this isn't the best way around it, but the gigs are now in an iframe, which gets rid of my other problems - and make the site look a little neater.

    If however you have any suggestions as to how to solve the problems without using Iframes then by all means tell me.

    Thanks again, I wouldn't have gotten this far without your help.

    -D
  18. #10
  19. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    by the way you could have easily just used a table
    if it look like table then use table.
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12
    Lets not get started on the Tables vs CSS argument, let me just say that I'm trying to avoid tables for anything but what they were designed for (tabular data) from now on.

    -D
  22. #12
  23. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    it was that i tried to point out,
    i you got tabular data then why reinvent the wheel,

    and the data you have in
    <div class="date">$date</div><div class="comment">$comment</div><div class="venue">$location</div>

    could much easilier have been put in table,


    and don't get me wrong. i only use css for layout, i even made a similar layout like you've made now in css, but there isn't no need to make thing overcomplicated,
    when you indeed have tabulardata
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12
    Ah we were talking at crossed purposes - sorry - I get what you mean now.

    Anyway I was just trying to remove this table in particular to play around with my new CSS knowledge.

    -D
  26. #14
  27. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    no problem could have been a bit more presise in my first post

    and its always fun to play around with css,
    and as i said i've done the same.
    (btw, its very seldom to see me talking pro table )

IMN logo majestic logo threadwatch logo seochat tools logo