SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Salt Lake City
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS-P frustration

    I love the idea of cascading style sheets, but I cannot for the life of me figure out how to get my positioning to work the way I want it to. Nevermind the browser differences. There just doesn't seem to be a good way to do a lot of things that are easy with table layout.

    For example, check out my site (www.minutejs.com). The masthead is my biggest frustration. In most browsers, if you increase the font size much, or decrease the resolution, the absolute positioned search form overlaps the other part of the navigation. If I change the z-index the reverse is true. If I set the search form relative and float it, it breaks. How can I do this the right way?

    Another frustration: I used to have a footer that would span the entire width of the page, but it only worked in Gecko browsers. What a pain.

    Has anybody managed to master CSS positioning? What are the secrets to creating great layouts that work accross all the capable browsers?

    - Eric

  2. #2
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For your search box to to overlap, i'd say floating it would be the only solution, what do you mean by "it breaks" ? Do you have an online example with it ? did you try floating it and putting the whole search div in the first position within your header ?
    I couldn't see your footer span the whole page neither in IE nor in gecko, is it on that same page ? how did it "not span" the whole page ?

    Quentin

  3. #3
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Salt Lake City
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It breaks in strange ways. In Netscape 7 for example, when I float it, everything appears the way it should, but the search input is rendered unusable. you cannot type anything into it. At any rate, I've decided to change the design anyway for better compatibility... however, I'm still having an issue with Internet Explorer 6 (the most popular browser used to access my site).

    Head on over to http://www.minutejs.com/ and let me know what I'm doing wrong.

  4. #4
    SitePoint Enthusiast DFS's Avatar
    Join Date
    Sep 2002
    Location
    The Wilds of Northern Maine
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are many others here who can offer much better help than I can.. I'm going through the same thing you are trying to make the transition from tables to css positioning.

    My understanding is, if you want that search form to move down under your nav area when the browser window isn't wide enough rather than overlapping it, you've GOT to float it.

    Stick with it though, it's well worth the effort I think! And like I said, I'm sure someone here can help you make it work.

  5. #5
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The browser vertical scrollbar was non-operational in Micro$haft IE 6.0 which wasn't good news since you could scroll down half the page, however Mozilla Phoenix the layout functioned correctly and the search engine was operational.

    Support for absolute and relative positioning in browsers tends to be quirky (especially M$ and version five browsers, or older) that's why when I developed my WVYFC site I just used a simple CSS-P designed that used floated divisions.

    I assume you are after a classic banner design with three columns, I cannot find anything major that is wrong with the CSS code on a casual inspection, however I really do need to thoroughly read the CSS 2.1 draft since 2003 is a most interesting year.

  6. #6
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Salt Lake City
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A lot of people are passing out CSS advice. A lot of people insist that CSS is better than table layout (and I agree with them completely), but I still have never seen a site that uses a very stardard layout (masthead, 3 columns, footer) that doesn't break on some browsers or rely on a fixed column height to prevent the footer from appearing in the wrong place (on top of or beneath one or more columns).

    Sites that do manage to pull off the layout I describe do so by ensuring that one of the columns uses relative positioning, and happens to contain MORE content than the others, OR have a fixed height that is larger than the other columns. The trouble with that aproach is:

    1) Many dynamic sites can't assume that there will be "enough" content in the relative column
    2) If you set a fixed height in pixels, but your user sets the text-size to "I'm BLIND, GIMMIE BIIIIIIIIIIG LETTERS" all bets are off

    So... let's have a contest.

    Head on over here for the details:
    http://www.minutejs.com/forum/viewtopic.php?t=28

  7. #7
    SitePoint Enthusiast DFS's Avatar
    Join Date
    Sep 2002
    Location
    The Wilds of Northern Maine
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Boy oh boy it sure is ugly. Meets all of your specifications, tested in IE6, IE5, Mozilla 7 & Opera 7, XHTML validates as well as the CSS.

    http://portalsmith.com/3col.html

  8. #8
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, DFS's stylesheet should work it has a similar CSS structure to what I knocked together about three years back for my "Beck" page (minus one column) and changed for my WVYFC (beta) layout early last year: http://www.xhtmlcoder.com/worthvalley/ I found out that it was Opera 6.0 that became annoyed most if you didn't add the CSS clear - which can stop creeping of footers, etc.

    Unfortunately Netscape 4.7x will have severe difficulties with such styling but obviously you'll know about the CSS @import ploy should you wish to help that aged browser.

    Good Luck.
    Last edited by xhtmlcoder; Mar 19, 2003 at 10:15.

  9. #9
    SitePoint Enthusiast DFS's Avatar
    Join Date
    Sep 2002
    Location
    The Wilds of Northern Maine
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder
    Hmmm, DFS's stylesheet should work it has a similar CSS structure to what I knocked up about three years back for my "Beck" page
    (emphasis mine)

    Hope you did the mature thing and stood up to take responsibility for any lil' baby pages that may have been running around as a result of that.



    Sorry... lack of coffee.

  10. #10
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Erm, yes that term didn't translate too well into international English I assure you they were JavaScript babies.

    Back in Victorian Britain, especially in northern industrial towns, an individual was employed to go to people's houses and wake them up by knocking on their bedroom window. If you were so wakened, you were 'knocked up'.

    I suppose you could say I was awaked to implementing CSS-P layout three years ago.
    Last edited by xhtmlcoder; Mar 19, 2003 at 10:40.

  11. #11
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Salt Lake City
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which browsers have difficulty with this CSS? What's the best way to deal with them?

  12. #12
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Salt Lake City
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've had issues getting form inputs to work in Netscape on floated elements. Has anybody else experienced that problem? Is there a good work-around?

  13. #13
    SitePoint Enthusiast DFS's Avatar
    Join Date
    Sep 2002
    Location
    The Wilds of Northern Maine
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dilvie
    Which browsers have difficulty with this CSS? What's the best way to deal with them?
    Which CSS? The code I submitted for your contest? (By the way, where's my cookie? ) From what I can tell, apart from Mac's which I can't test on, it works in all compliant browsers. The only thing I can see it bung up in is Netscape 4.x but that's no shock, just need to hide the CSS from that with the @import and provide it a dummy page (with a nice upgrade now message).

    Quote Originally Posted by '[b
    xhtmlcoder "[/b]] Erm, yes that term didn't translate too well into international English I assure you they were JavaScript babies.
    I meant no offence, it just struck a 'Beavis and Butthead'-type funnybone that I've got before I fully wake up in the morning. I'm usually just ignored before I hit coherence.

  14. #14
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Salt Lake City
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check the topic here for an update:

    http://www.minutejs.com/forum/viewtopic.php?p=55#55

    I'll need the URL you want me to link to in the article credits.

  15. #15
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)

    Smile

    I didn't take any offence; actually it was rather amusing seldom do I take myself seriously .

    Anyhow all mainstream browsers have CSS quirks although at the moment for the Windows OS one would say Mozila 1.x and Opera 7.x probably have the reasonable rendering ability with regards to the CSS standards.

    I have it on fairly good authority that other Gecko browsers: Galeon, Skipstone, Phoenix, Camino, K-Meleon, plus the KHTML based Safari/Konqueror are supposedly all pretty good at implementing CSS-2 correctly.

    As you can see from my WVYFC site M$ IE 6.0 fails to deal with 'display: none;' correctly and styling of 'attribute selectors' for example: abbr[title] {cursor : help;} just because a browser supports a CSS propriety doesn't mean it follows the rules correctly.
    Last edited by xhtmlcoder; Mar 20, 2003 at 10:59.

  16. #16
    SitePoint Guru silver trophy Luke Redpath's Avatar
    Join Date
    Mar 2003
    Location
    London
    Posts
    794
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dilvie
    I love the idea of cascading style sheets, but I cannot for the life of me figure out how to get my positioning to work the way I want it to. Nevermind the browser differences. There just doesn't seem to be a good way to do a lot of things that are easy with table layout.

    For example, check out my site (www.minutejs.com). The masthead is my biggest frustration. In most browsers, if you increase the font size much, or decrease the resolution, the absolute positioned search form overlaps the other part of the navigation. If I change the z-index the reverse is true. If I set the search form relative and float it, it breaks. How can I do this the right way?

    Another frustration: I used to have a footer that would span the entire width of the page, but it only worked in Gecko browsers. What a pain.

    Has anybody managed to master CSS positioning? What are the secrets to creating great layouts that work accross all the capable browsers?

    - Eric
    There is a solution to your problem - it is not definitive but I think it works well enough. I simply added 50% padding-right to the masthead, so when you enlarge the text, once it gets big enough to take up more than 50% of the box, it wraps wround to the next line. It can wrap onto a second line, but not a third line because then the nav text overlaps the bottom bounds of the masthead box. But using Opera's zoom function, I was able to zoom in to 260% before there were any overlaps, which should be just fine, realistically.

    You can view it here:

    http://testpad.sonicdeath.co.uk/minutejs.htm


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
  •