SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face Help please - almost done with new layout!

    OK, I'm *really* excited over here. After Paul's help on the basic structure of a modified 3-col layout I started, I worked on it more. I added some things that made it nicer but a little more complicated, and hit a few Firefox bugs that were stumpers. It also was broken in IE.

    But after much persistence and research, I got it working!! I can't believe I actually have created a tableless layout now. And it's even valid XHTML1.1+CSS, and source-ordered! CSS is so much fun!

    Ahem, anyway, the layout isn't *quite* finished. There are two little FF issues left, and I have no way of testing it on a few browsers. Thus I'm asking for some help.

    Here's the sample page for the layout: www.harmoniva.com/files/thg3.html

    1) Firefox Issue: Div's not stretching to full width

    You'll notice there's a shaded box under each news story. The first says "ok this is a test", the second is blank. In Opera and IE6/Win, the box stretches all the way across the middle column like I thought a div was supposed to without a width setting. But in Firefox, the div is only as wide as its content. I'm really not sure how to fix this one.

    2) Firefox Issue: Look when window width is small

    If you open the page in say Opera (or even IE) and resize your window to a small width, the middle column shrinks until it can no longer, and the side columns still frame it. In Firefox, though, the middle column shrinks to a certain width and then it and the header protrude over the lefthand menu. I set the z-index's so that the middle column and header would stay on top. But still, I'd much prefer the behavior of Opera/IE, if that's at all possible.

    3) Cross-browser testing

    It'd be good if someone could look at the page in IE5/Win and IE5.5/Win, as I don't have any copies laying around. NS6 would be cool but it's not a huge priority to me.

    The main thing is that I have no access to a Mac, so I have no clue how it will work in IEx.x/Mac and Safari. If someone could take a look that'd be awesome. I may need to include some IE/Mac hacks, I don't know. You can post a screenshot here or send it to my username (at) harmoniva.com.


    Any comments on the code are welcome - this is essentially first draft. The HTML structure is a bit complicated, but the CSS hacks turned out to be fewer than I expected. If you have any questions about how the structure works just let me know, I'll be happy to explain things. There's a background div (bodyBorders) that has a black background and two wide, green borders. The green borders form the column backgrounds, while the middle column container has a white background and is smaller in width than bodyBorders by a pixel, forming black borders on either side. The CSS file is www.harmoniva.com/files/screen.css . . . it's organized into a general sections. There are some leftovers from Ruthsarian code that I pasted in, such as hnav settings.

    Many thanks to Paul, SitePoint, and all the other great CSS sites that have helped me learn enough to get where I am now. I have lots of CSS to learn, but I'm having a blast with it already.

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mac previewing: www.danvine.com/icapture

  3. #3
    SitePoint Guru gavwvin's Avatar
    Join Date
    Nov 2004
    Location
    Cornwall, UK
    Posts
    686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heres an ie 5.5 screenshot:

    The calander overlaps into the middle column and is forced below the content.

    (LOL I was reading with dismay about w3 cancelling css3 development, but then I looked up and saw "Microsoft releases open-source windows" and realised it was a joke!)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Issue 1 in firefox is because the parent float has no width. Therefore the auto width of your newsFooter is collapsed to content width the same as the parent is.

    You need to supply a width to the parent and the child will expand automatically.
    Code:
    #mainSection
    {
    float: left;
    position: relative;
    z-index: 4;
    margin: 0;
    }
    html>body #mainSection{width:100%}
    I've hidden it from ie because ie would probably need 99% because of its rounding bugs with percentages.

    (I'll have a look at the other issues later )

    Paul

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Issue 2 ) The problem is again related to floats and not having specific widths but can be solved by adding another nesting and removing the float to the inner nesting as follows.
    Code:
    #contentSectionsContainer
    {
     position: relative;
     margin: 0 -201px 0 0;
    }
    * html #contentSectionsContainer{float:right;}
    html>body #contentSectionsContainerInner{float:right;width:100%}
    Add that extra inner container (#contentSectionsContainerInner) nested inside the existing one (#contentSectionsContainer). This should make firefox work as expected.

    You have problems in opera 7.5 already with your existing layout as it doesn't seem to like some of those negative margins.

    Paul

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    The ie5.5. issue in gavwvins screenshot can also be fixed but again needs further nestings. Ie5 and 5.5. have trouble with table widths unless they are wrapped in a div that has a width set. Otherwise they either take 100% as the browsers width or some other strange width of their own.

    Code:
    #contentSectionsOuter{ margin: 0 201px 0 0;}
    /* mac hide\*/
    #contentSectionsOuter{height:1%;}
    /* end hide - this fixes the centre width correctly in ie5*/
     
     
    .tablewrapper{width:100%}
    Wrap the tablewrapper around the sidesection.
    Code:
    		 <div id="sideSection"> 
    			<div class="inside"> 
    			 <!--- side section begin -->
    			 <div class="columnBegin"></div>
     
    	 <div class="tablewrapper">
    	 <table class="calendar">
    				<caption>
    				December 2004
    				</caption>
    				<thead>
    				 <tr> 
    					<th>S</th>
    					<th>M</th>
    					<th>T</th>
    					<th>W</th>
    					<th>T</th>
    					<th>F</th>
    					<th>S</th>
    				 </tr>
    				</thead>
    				<tbody>
    				 <tr> 
    					<td colspan="3"> </td>
    					<td>1</td>
    					<td>2</td>
    					<td>3</td>
    					<td>4</td>
    				 </tr>
    				 <tr> 
    					<td>5</td>
    					<td>6</td>
    					<td>7</td>
    					<td>8</td>
    					<td>9</td>
    					<td>10</td>
    					<td>11</td>
    				 </tr>
    				 <tr> 
    					<td>12</td>
    					<td>13</td>
    					<td>14</td>
    					<td>15</td>
    					<td>16</td>
    					<td>17</td>
    					<td>18</td>
    				 </tr>
    				 <tr> 
    					<td>19</td>
    					<td>20</td>
    					<td>21</td>
    					<td>22</td>
    					<td>23</td>
    					<td>24</td>
    					<td>25</td>
    				 </tr>
    				 <tr> 
    					<td>26</td>
    					<td>27</td>
    					<td>28</td>
    					<td>29</td>
    					<td>30</td>
    					<td>31</td>
    					<td> </td>
    				 </tr>
    				</tbody>
    			 </table>
    			 <form action="#" method="post">
    				<h3>Search Site</h3>
    				<div class="themeblock" id="divSearch"><br />
    				 <input type="text" id="txtSearch" />
    				 <input type="submit" value="Find It" id="btnSearch" />
    				</div>
    			 </form>
    			 <form action="#" method="post">
    				<table class="poll">
    				 <caption>
    				 Featured Poll
    				 </caption>
    				 <thead>
    					<tr> 
    					 <th colspan="2">Which search engine do you use most often?</th>
    					</tr>
    				 </thead>
    				 <tfoot>
    					<tr> 
    					 <td><input type="submit" value="Vote Now" id="btnVote" /></td>
    					 <td><a href="#">View Results</a></td>
    					</tr>
    				 </tfoot>
    				 <tbody>
    					<tr> 
    					 <td colspan="2"><input type="radio" name="poll" />
    						Google</td>
    					</tr>
    					<tr> 
    					 <td colspan="2"><input type="radio" name="poll" />
    						Yahoo!</td>
    					</tr>
    					<tr> 
    					 <td colspan="2"><input type="radio" name="poll" />
    						MSN Search</td>
    					</tr>
    					<tr> 
    					 <td colspan="2"><input type="radio" name="poll" />
    						Other</td>
    					</tr>
    				 </tbody>
    				</table>
    			 </form>
    			 </div>
    	 <br class="hide" />
    			 <!--- side section end -->
    			 <hr class="hide" />
    		 </div>
    That will fix ie5.5.

    Paul

  7. #7
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help guys . . .

    I was unaware of iCapture . . . that is slick. Wish every browser had that.

    I think I know how to fix IE5.5; I think it's related to a box model issue.

    You have problems in opera 7.5 already with your existing layout as it doesn't seem to like some of those negative margins.
    Aah yes, I forgot about 7.5 . . . that may sound strange but I've been using 7.6 beta and it works beautifully there (first browser to work completely). I keep forgetting to go back and check it in 7.54.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    I think I know how to fix IE5.5; I think it's related to a box model issue.
    No its related to table widths and they inherit. Its a common problem in ie5 and 5.5. and you nearly always need to wrap the tables in a div that6 has a width set. The table can then have a width and inherits the correct size directly from its parent.

    The height:1% hack is also needed on the centre content otherwise that also goes to 100% width which takes it off the right side of the screen. (See my above post for a solution )

    Paul

  9. #9
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it, we apparently posted about the same time.

    These nested divs are starting to really get complicated . . . is there no other way to accomplish this kind of layout and still have it source-ordered? Kind of makes me wonder if this SEO technique is really worth it in this case . . . though I guess it's not too complex. Anyway, the help is much appreciated and I'll keep working on this.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    is there no other way to accomplish this kind of layout and still have it source-ordered
    Only when you don't need to have footers under all the columns otherwise you could use absolute positioning without extra divs required. The extra nestings are needed when you are trying to keep everything in the flow using floats and static positioning.

    I'm not 100% convinced that better ranking is obtained by higher content but everyone seems to suggest that that is correct. My priority would usually be making the layout the simplest way possible first and then think about seo etc afterwards.

    Paul

  11. #11
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, have worked on this some more . . .

    As I was working on this and looking at other layouts, I realized that my use of borders as column backgrounds limited them to solid backgrounds. I began to wonder if I could pull something off that would allow for any kind of background on the columns.

    I reworked things and came up with this: www.harmoniva.com/files/thg3_opera.html (CSS: www.harmoniva.com/files/screen_opera.css ). It worked beautifully in Opera and Firefox, but then I opened up IE6 - horribly broken. I then created a copy and worked on trying to get it to look right in IE6. I starting thinking through how to accomplish the background trick using layered divs, and eventually created a very different layout than what I started with: www.harmoniva.com/files/thg3.html (CSS: www.harmoniva.com/files/screen.css ). It works beautifully in IE6 and Firefox, but then I opened up Opera - this time it horribly broke there.

    In the second version I cleaned some things up and renamed the div's to where I really like the structure of it (relatively speaking). I haven't done any Mac or IE5.x testing, but for it to work in IE6 and Firefox is at least a start. But I'm wondering what Opera is choking on.

    Thanks again for all the help!

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    But I'm wondering what Opera is choking on.
    Sorry I haven't had time to have a good look at this but one thing Opera doesn't seem to like is floats without specified widths. Floa sshould always have widths as ie mac doesn't like them without widths either and according to the specs floats should have widths defined. (sometimes you can get away without a width but it does depend on the layout).

    What seems to happen in those browsers is that the float may default to 100% width rather than content width that other browers use.

    So maybe checking the widths of the floats are defined correctly may help. If you are floating without a width for some reason then you may need to use a non floated parent to gain the size and then you can set the float to 100% of the parent.

    Paul

  13. #13
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    floats should have widths defined
    Yep, that apparently was the thing that Opera didn't like. I probably should have taken more time to learn the finer points of CSS before tackling a project like this. I'm curious, Paul - how did you get to be a CSS guru? Was it just something you learned as the standards developed, or did you have something like books or courses that you used? Just wondering - I really want to learn CSS more.

    Anyway, I hashed through the layout more last night and today, and am glad to say it's now working in Opera 7.54 (and 7.6 beta), Firefox 1.0, and IE6/Win! The link has been updated ( www.harmoniva.com/files/thg3.html ). I had to add some padding in places, plus some more containers to get the widths correct. The HTML is still a little more complicated than I would have liked, but it's not all that bad. Each column has an associated div that provides its background, then there are several container divs and of course divs for the columns themselves.

    The first two sections of the CSS define the essentials of the layout. The code is pretty clean - only 5 IE hacks I think. Some more may be needed for IE5.x/Win* and Mac browsers, though, so if anyone could test them I'd be extremely grateful. I've registered with iCapture but so far it hasn't worked for me yet - I keep getting a "Lazy Man's Error". I figure the guy behind it is doing some maintenance.

    So, the layout supports three major Windows browsers so far, and hopefully it will be cross-browser soon. I'm also still not sure source-ordering is a big enough deal when it comes to SEO, but since it seems to be in demand this layout may be helpful to some. And I know on my PalmOS smartphone that source-ordering can be nice in non-CSS browsers, plus from what I read it also helps in terms of accessibility.

    *Just discovered evolt's browser archive, so now I can test IE5.x/Win on my own. The help of any Mac users is still greatly appreciated.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    HI,

    Glad you're working your way through this. Its looking pretty good.

    For multiple IE PC versions on the same machine go here:

    http://www.skyzyx.com/archives/000094.php

    This will allow then to sit on the same machine as normally you would be unable to do this.

    I'm curious, Paul - how did you get to be a CSS guru? Was it just something you learned as the standards developed, or did you have something like books or courses that you used? Just wondering - I really want to learn CSS more.
    Well I wouldn't call myself a guru but more a problem solver. I like solving problems with css especially when people say it can't be done. Working on the forums affords me the chance to see many hundreds of bugs and layout problems each week so I get to fiddle about with everyones code and most of the time I can see more or less straight away whats causing the problem.

    I also have some books so that I can look up and check exactly how an element is supposed to work as you need to know the correct behaviour for the css before you can determine if its a bug or not. A lot of people skip the basics and start using things like relative positioning for layouts without really understanding the concept. This is the same for floats and so many people blame the browsers rather than their own lack of knowledge.

    However we all have to start somewhere which is why forums like sitepoint are so useful If you want to learn more css then read as much as you can and also try helping other people with their problems as this is also a good way to find out how things work.

    Paul


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
  •