SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Image making text move down

    Hey guys,
    I do not know if this is a css issue or not but could you please check the following website at the link below and try and help me figure out why the image at the top of the navigation division which incidently is of the word "Navigation", when it is displayed, the text in the content div is moved down. If the image is removed then the text moves back up.


    Link Here

    Really confusing me

    I would really appreciate some help with this.

    Thanks

    Regards,
    Neil

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is the vertical alignment of the image. An image is normally aligned so that the bottom of the image is aligned to the baseline of the inline text box in which it resides - this causes any associated text beside the image to display at the bottom of the image. The inline box is carried over across table cells to align the text between cells - desirable in a table of tabular data, but not in a layout, which is why I cannot understand why you would want to lay out a site by emulating tables.....

    Anyway, setting the vertical-align of the image to "middle" or "top" will affect the change.

  3. #3
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    I cannot understand why you would want to lay out a site by emulating tables...
    But isn't this how CSS sites are meant to be laid out? I mean, floating / absolute positioning were never really meant to do this sort of page layout...(CSS tables aren't for 'tabular' data... so to speak...)

    The OP could also just do this:

    Code:
    #content {
    vertical-align: top;
    }
    but I suppose since the image is causing the problems, IT should do some work to fix it (so to speak...)
    Simple is beautiful.

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Aarem View Post
    floating / absolute positioning were never really meant to do this sort of page layout...(CSS tables aren't for 'tabular' data... so to speak...)
    Floating and normal positioning are the basis for laying any site, and this one can be done very easily this way - absolute positioning should not be used as a general positioning method, but rather for special effects like overlapping.

    Proper html tables are the best for presenting tabular data, and I don't really see the point of making layout elements behave in the same way as tables...

  5. #5
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    Floating and normal positioning are the basis for laying any site...
    Sure, this is how I work at the moment, but the Everything You Know Is Wrong bandwagon has gotten me thinking about CSS tables. I had not realized until recently that floats were never intended for major page layouts (where one div sits beside another and so on). Apparently CSS display: table was designed for that. Though it's imperfect (such as positioning within cells not being supported), it has some advantages (like avoiding all this silly div clearing stuff).

    I guess if we are aiming for ever-improved web standards, we need to follow the standards as closely as we can; and with IE8 promising to be a bit more compliant, it seems CSS table display has to be taken more seriously.
    Simple is beautiful.

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Aarem View Post
    I had not realized until recently that floats were never intended for major page layouts
    So how did you arrive at that assumption?

    It seems to me that table and table-cell display modes have been pushed by table-layout designers who cannot get away from the thinking behind sticking content in pre-defined boxes, but don't want to get chastised for doing so .....

  7. #7
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    So how did you arrive at that assumption?
    I've read in quite a few places (such as Everything You Know ... Is Wrong) that sitting blocks side-by-side was not the original purpose envisioned for floats. (It was more for allowing content to flow around other elements, like images.) Had floating been designed for side-by-side blocks, you'd think it would have been better designed.

    Basically, no-one wants to see a site with just vertically stacked blocks. So the question is, how to create a kind of 'grid' layout. Originally, this could only be done with html tables, but these have a semantic value that is usually not appropriate for page layout.

    It seems to me that table and table-cell display modes have been pushed by table-layout designers who cannot get away from the thinking behind sticking content in pre-defined boxes
    OK, I am basically a noob, but I still think that's a little unfair. Basically the web needs a solid way to create a grid layout without misusing semantic code to do so.

    CSS tables would probably have been better named 'CSS grids' or something like that. CSS allows for a table-like layout without cluttering the html with wrong messages (such as 'this is tabular data'). I think that's the only important issue. Then the question is, Which tool best allows for this? In many cases, CSS table layout is much better suited than floats to create a grid layout. Floats introduce a lot of issues that are pretty inefficient, like how to make columns full height, and how to clear containing divs. (Faux columns, and extra, empty divs for clearning, or overflow: hidden, or clearfix, are all hacks/workarounds that cannot be considered good practice.)

    Whether or not to use CSS table display is a different issue from arguing over whether or not html table layouts are good or bad. That issue is dead.
    Simple is beautiful.

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Using overflow to enclose content (floats included) is not a hack.

  9. #9
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "Grid" layouts are fine for print media, but the web is not print - there are too many variables of viewing device, viewable area, user set font sizes etc that make a grid layout too inflexible for many situations.

  10. #10
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Using overflow to enclose content (floats included) is not a hack.
    I did say 'hack/workaround' to cover my backside... sort of!

    Is it really what overflow was designed for, though? Ultimately I'd like to see a web that has a specific tool for each purpose. Don't get me worng--I do like overflow: hidden; but, even if it's not a 'hack' when used to clear floats, it is still worth asking why we are having to clear them anyway. Here's an interesting angle on problems with overflow: hidden offered by Kravvitz recently: problems.

    Quote Originally Posted by Centauri View Post
    "Grid" layouts are fine for print media, but the web is not print - there are too many variables of viewing device, viewable area, user set font sizes etc that make a grid layout too inflexible for many situations.
    Again, maybe wrong terminology. I'm talking about methods for aligning divs side-by-side, and css tables is a good way to do that in many cases. From what I can see, and were it not for IE shortcomings, it would be a preferable method in a majority of cases. Still, I'm open to alternate views. CSS tables are all new to me...
    Simple is beautiful.

  11. #11
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I ahve posted 2 topics so far about minor problems with the CSS Tables thing and in both I get people telling me to not use CSS Tables at all. I am only merely havinga go at using a different technique and if no one has a go and starts to use them then the web will never move forward. As I see it, CSS Tables offer many benfits over current layout techniques and as Kevn says in his latest book, CSS tables only emulate the layout styles of a regular HTML table but not the actual semantic meaning of a regular HTML table

  12. #12
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was rying to fix this issue just now and top or middle would both render a gap above the content text or a gap above the image. I tried text-top and that works great in Opera but when I view it in IE8, it puts a gap above the image.

    Any ideas on how this can be solved?

    Thanks

    Regards,
    Neil

  13. #13
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about all our blabbering, but the answer to your problem was given in post 2 (and 3) above:

    Either

    Code:
    #navigation {
    vertical-align: top;
    }
    Or

    Code:
    #content {
    vertical-align: top;
    }
    Edit: hmmm, re-reading your post, are you saying there were problems with this in IE8?
    Simple is beautiful.

  14. #14
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rctneil View Post
    CSS tables only emulate the layout styles of a regular HTML table but not the actual semantic meaning of a regular HTML table
    While that is true, and CSS tables may be suited to some kinds of layout, the fact that they emulate the display actions of tables can cause some unwanted side effects as you have found out.

    Not sure how you get around the interaction between rows. Would be good if Paul chimed in on this one - he may have had more experience with this.

  15. #15
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll give those a ry as I set vertical-align on the image itself, let me try some other things later when I get back home as I am on my way out now

    Centauri, I do understand what you mean and thats the reason I am giving them a go to find out these issues and to have a play around with a different ways of coding the same thing. Pauls opinion would be interesting also

    Thanks

    Regards,
    Neil

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The vertical alignment of table cells is usually set to middle so whenever you use display:table-cell you will need to set the vertical alignment accordingly (as already mentioned) .

    Code:
    #navigation,#content{vertical-align:top}
    For Firefox you will always need to use an intermediate element that is set to display:table-row otherwise the cells are misplaced on first visit.(e.g. the parent is display:table then the next nested element is display:table-row and finally the next element is display:table-cell).

    Regarding using display:table for layout I think that it is fine as long as you keep it simple and organised. Firefox does have problems with it but if you follow the advice above then it behaves much better.

    Tables and display:table are great for grid layouts but you do have to work with the limitations of tables (absolute positioning for table cells is not defined) and cells will grow together even when you don't want them to. You can't move one cell out of the flow or make it overlap another cell etc.

    Therefore I would only use display:table in small doses when I wanted an equalising effect or some other vertical-alignment table effect. For the rest I would use floats and other positioning systems.

    However I think its great to experiment and see what can be done as that's how we all learn and find out the problems and the solutions.

    Regarding the question on floats then it may have been true ten years ago that perhaps they weren't originally designed to layout columns and pages but the same argument is even more true for tables as they were never meant for layout at all so the question is irreleveant.

    Some experts will argue that we shouldn't be using floats for layout but have offered no alternatives other than "change your design" which is nonsense and unacceptable. I believe that as long as you are using the css property correctly and it is working according to the specs then you can use it in any way you like.

    Negative margins, overflow and floats are all useful tools in the css toolbox and have evolved to a sophisticated degree and can create layouts that can't be done with tables.

    Now that display:table is also available then we have an extra choice and can accomodate nearly all layouts that were previously only available to tables.

    Quote Originally Posted by aarem
    I did say 'hack/workaround' to cover my backside... sort of!
    It was a never a workaround or a hack as containing content such as floats is how the porperty was always defined in the specs. Overflow has many other properties such as not collapsing margins and making static content avoid sliding under floats and is a very useful tool.

    However if you require negative margins or have content that needs to be scrolled then you can use the "clearfix" method instead which works quite well although will occasionally render extra space at the bottom of the window.

    As usual with css there isn't one approach as it all depends on the situation.

  17. #17
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much Paul for your opinions. - I am going to continue to convert my site to be CSS Table based and create backwards compatibility versions for older browsers just for my sake if anything, I will definitely learn from it if nothing else.

  18. #18
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, thanks for your reply, Paul. I'm happy to be set straight if I say anything wrong, as I'm mainly here to learn.

    I wasn't around in the days where webmasters had to create a different 'site' (so to speak) for every browser, so I guess I should not complain about the current playing field. All the same, the world depends so much on the web now that it surprises me how 'haphazard' web design still is. It seems that every method for page layout has evolved in a stuttering, ad-hoc manner that leaves the webscape full of crevasses, so to speak. Imagine if engineers designed skyscrapers like that! (Or did 9/11 demonstrate that they DO?! Gulp.)

    I had hoped to discover that CSS has provided well-thought-out, purpose-built methods for page layout, and that it was just a matter of browsers implementing those principles properly. Now I am left wondering if any page layout method--be it floating, css tables, absolute positioning or anything else--was actually designed to handle today's layouts--either in isolation or in combination--or whether we are using them in creative ways that were not intended but that basically work. It seems the latter, and I find that somewhat dissatisfying.

    Do the CSS specs recognize floats as a means of creating columns? I can't quite find a clear declaration on that.
    Simple is beautiful.

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Hi Aarem.

    http://www.w3.org/TR/CSS2/visuren.html

    In short, yes.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by aarem
    It seems that every method for page layout has evolved in a stuttering, ad-hoc manner that leaves the webscape full of crevasses, so to speak.
    To some extent you are correct and css has been implemented incrementally so it never was a showstopper from the word go.

    CSS has been implemented in stages and is also evolving to meet moving targets but I agree that the changes are too slow and the reason that designers will use whatever they can to lay out their pages. Css3 has some incredible modules (css columns for examples) but it will be a while before they are fully implemented due to the complexities of the issues and the fact that all browsers don't take these properties on board at the same time.

    The original css problem was mainly an IE (MS) problem and the lack of CSS features that IE originally implemented was never enough to achieve the desired effect without resorting to workarounds.

    CSS does contain all the tools you need to produce any kind of layout but unfortunately very few browsers supported enough of these properties to make them viable. It is ony now that IE8 is due to be released that we are approaching a point where things start to fall into place.

    Had IE supported display:table, min-height/width and various other properties from the start (like other browsers) then things would have been a lot easier.

    It is also a sticking point in that new css features take so long to be ratified and introduced and quite often the target has moved by the time these features are implemented. This seems to be a by-product of the need for standardisation and in effect seems to halt progress as no-one makes a final decision in time. However, we can't have it both ways If you want all browsers to be the same then these things have to be discussed fully in detail otherwise you end up with proprietary code again which takes us back to square 1.

    In my opinion a lot of the CSS3 modules are interesting and extremely advanced (nth child etc) but development should really center on the important concepts of layout rather than these other useful (but almost unnessary and extremely complex) modules. In essence a reduced instruction set concentrating on layout would be much more useful.

    To answer your original question about floats then yes they were always part of the visual formatting module and there were no limitations applied to them. It was up to the user to use these positioning tools to create the layouts that were required.

    A floated block is essentially a column anyway and perhaps the original intention was that these floats could go horizontal where room allows or on smaller width screens would line up underneath each other. Something a table cannot do as cells can never move vertically underneath each other. However, as designers were used to the rigid structure of tables thay try to coerce floats to behave in a rigid manner just like table cells. The question should be asked whether this is the right approach or just a lack of foresight on the part of the designer.

    A web page is a living thing and you never know how it will be viewed or what it it will be viewed on. A rigid table layout approach just cannot work in this scenario.

    Perhaps the future doesn't lie with CSS and maybe something better is around the corner but until then we just have to get on and work with what we have got

  21. #21
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, what a delightful answer. Thanks for going to all this effort. It's really interesting to get your perspective on all this.

    Quote Originally Posted by Paul O'B View Post
    CSS does contain all the tools you need to produce any kind of layout...
    It's nice to hear you say that.

    In my opinion a lot of the CSS3 modules are interesting and extremely advanced (nth child etc) but development should really center on the important concepts of layout rather than these other useful (but almost unnessary and extremely complex) modules. In essence a reduced instruction set concentrating on layout would be much more useful.
    Good point. I have to admit that, in my brief experience of css web design (one year), it seems that there are enough basic tools to do a nice, reliable job of pretty much any layout without having to get too fancy.

    To answer your original question about floats then yes they were always part of the visual formatting module and there were no limitations applied to them.
    I'm glad to hear that, as I quite like floats; but I've been getting contradictory messages of late. Can't quote them, unfortunately, except perhaps Kevin Yank/Rachel Andrew of You Don't Know Nothin' fame (or whatever it's called!), p6, where they mention that the floating of blocks side by side was "never envisioned by its creators". Maybe I am mis-interpreting them.

    ...perhaps the original intention was that these floats could go horizontal where room allows or on smaller width screens would line up underneath each other. Something a table cannot do... A web page is a living thing and you never know how it will be viewed or what it it will be viewed on. A rigid table layout approach just cannot work in this scenario.
    Another great point.

    Thanks again, Paul. You are a gem.
    Last edited by Aarem; Jan 1, 2009 at 06:30.
    Simple is beautiful.

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    where he mentions that the floating of blocks side by side was "never envisioned by its creators". Maybe I am mis-interpreting him.
    I have also seen it stated that floats were never intended for layout but this CSS1 test page from the w3c about 10 years ago clearly states:
    By using floating DIV elements, many of the HTML pages now using tables can be simplified and accessibility improved.
    There are other similar test pages showing floated type layouts.

    I think there can be no doubt from the first example what was intended

  23. #23
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, that settles it then. Thanks again.

    Gee, your first link (the page of 10 years ago) was quite touching:

    Since no browser displays these documents correctly yet...
    Imagine that! It sure puts in perspective how lucky we are now!
    Simple is beautiful.


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
  •