SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Zealot 810311's Avatar
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    132
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question image position in Opera differs from Firefox and Chrome

    Hello Good People,

    Please, take a look at this site http://yogastudio.atspace.com/

    Issue: the following images get nudged down in Opera but look ok in Firefox and Chrome

    HTML Code:
    <img id="mon" src="images/mon_img.png" alt="" width="113" height="113"/>
    <img id="tue" src="images/tue_img.png" alt="" width="113" height="113"/>
    <img id="wed" src="images/wed_img.png" alt="" width="113" height="113"/>
    <img id="thu" src="images/thu_img.png" alt="" width="113" height="113"/>
    <img id="fri" src="images/fri_img.png" alt="" width="113" height="113"/>
    <img id="sat" src="images/sat_img.png" alt="" width="113" height="113"/>
    <img id="sun" src="images/sun_img.png" alt="" width="113" height="113"/>
    Any advice is appreciated

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    It breaks pretty wildly in Firefox, too, depending on the user's font size.

    relative positioning is not the best choice for positioning most objects. Between relative positioning and ems for positioning, it breaks according to the user's font size and platform, and browser.

    I suggest you reconsider your layout strategy and put each row in its own box, which in turn, are within a "calendar" container.... or something like that.

  3. #3
    SitePoint Zealot 810311's Avatar
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    132
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    thanks ronpat. should I use any positioning at all for scenario you suggest or just use padding/margin to move boxes around within container? also which length unit you suggest?

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    If each day-of-the-week were in a separate table, the day-of-the-week image could be absolutely positioned to the top left corner of the table (you cannot p:a within table-cells, of course); thereby, using px to position that image. It should be possible to align the columns vertically by giving each table table-layout:fixed and assigning widths to the columns. It'll take some experimenting, but I believe that will work reasonably well in your fixed width layout.

    Something like this:
    Code:
    table {
        position:relative;
    }
    .day-image {
        position:absolute:
        top:-20px;
        left:-20px;
    }
    
    <table>
        <img class="day-image"></img>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    The table would be repeated for each day-of-the-week with an image.
    (untested)

  5. #5
    SitePoint Zealot 810311's Avatar
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    132
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I guess I am doing something wrong - still breaks in Firefox when I increase font size.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
         
    <head>
    
    <title>Студия Sattva</title>
          
    <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
    
    <link href="css/style_1.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    
    <body>
    
    <h1>Расписание занятий</h1>
    
    
    <div id="calendar">
    
    <table class="schedule">
    
    <img class="mon-image" src="images/mon_img.png" alt="" width="113" height="113"/>
    
    <thead class="border">
    <tr>
    <th scope="col" class="col1"></th>
    <th scope="col" class="col2">Время</th>
    <th scope="col" class="col3">Занятие</th>
    <th scope="col" class="col4">Преподаватель</th>
    </tr>
    </thead>
    
    
    <tbody>
    
    <tr class="height">
    <th scope="row"></th>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    
    
    
    <tr> 
    <th scope="row">Пн</th>
    <td class="strip">7:30  8:30</td>       
    <td class="strip">Цигун</td>    
    <td class="strip">Светлана по записи</td>
    </tr>
    
    <tr>
    <th scope="row"></th>
    <td>9:00  10:30</td>
    <td>Хатха-йога</td>
    <td>Ольга по записи</td>
    </tr>
    
    <tr>
    <th scope="row"></th>
    <td class="strip">11:00  12:00</td>
    <td class="strip">Йога для беременных</td>
    <td class="strip">Ольга по записи</td>
    </tr>
    
    
    <tr>
    <th scope="row"></th>
    <td>12:30  16:30</td>
    <td>Время для индивидуальных занятий йогой</td>
    <td>по записи</td>
    </tr>
    
    
    <tr>
    <th scope="row"></th>
    <td class="strip">17:00  18:00</td>
    <td class="strip">Йога для беременных</td>
    <td class="strip">Ольга по записи</td>
    </tr>
    
    
    <tr>
    <th scope="row"></th>
    <td>18:00  19:00</td>
    <td>Оздоровительная йога по улучшению зрения</td>
    <td>Ольга </td>
    </tr>
    
    <tr>
    <th scope="row"></th>
    <td class="strip">19:15  20:45</td>
    <td class="strip">Хатха-йога</td>
    <td class="strip">Ольга</td>
    </tr>
    
    <tr class="height">
    <th scope="row"></th>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    
    
    </tbody>
    </table>
    
    <table class="schedule">
    
    <img class="tue-image" src="images/tue_img.png" alt="" width="113" height="113"/>
    
    <thead >
    <tr id="border" >
    <th scope="col" class="col1"></th>
    <th scope="col" class="col2"></th>
    <th scope="col" class="col3"></th>
    <th scope="col" class="col4"></th>
    </tr>
    </thead>
    
    <tbody>
    
    <tr> 
    <th scope="row">Вт</th>
    <td class="strip">7:30  8:30</td>       
    <td class="strip">Цигун</td>    
    <td class="strip">Светлана по записи</td>
    </tr>
    
    <tr>
    <th scope="row"></th>
    <td>9:00  10:30</td>
    <td>Хатха-йога</td>
    <td>Ольга по записи</td>
    </tr>
    
    <tr>
    <th scope="row"></th>
    <td class="strip">11:00  12:00</td>
    <td class="strip">Йога для беременных</td>
    <td class="strip">Ольга по записи</td>
    </tr>
    
    
    <tr>
    <th scope="row"></th>
    <td>12:30  16:30</td>
    <td>Время для индивидуальных занятий йогой</td>
    <td>по записи</td>
    </tr>
    
    
    <tr>
    <th scope="row"></th>
    <td class="strip">17:00  18:00</td>
    <td class="strip">Йога для беременных</td>
    <td class="strip">Ольга по записи</td>
    </tr>
    
    
    <tr>
    <th scope="row"></th>
    <td>18:00  19:00</td>
    <td>Оздоровительная йога по улучшению зрения</td>
    <td>Ольга </td>
    </tr>
    
    <tr>
    <th scope="row"></th>
    <td class="strip">19:15  20:45</td>
    <td class="strip">Хатха-йога</td>
    <td class="strip">Ольга</td>
    </tr>
    
    </tbody>
    
    
    </table>
    
    </div><!--end calendar-->
    
    </body>
       
    </html>



    Code:
    /*start table*/
    
    #calendar {
    padding: 1em;
    border: 1px dashed green;
    }
    
    table.schedule {
         position: relative;
         table-layout: fixed;
         border-collapse:collapse;
         font-family: Arial, Helvetica, sans-serif;
    }
    
    
    table.schedule thead tr {
    color: #ef7eb2;
    background: #f1fefe;
    
    }
    
    table.schedule thead tr th {
    text-align: left;
    padding: 7px 0px 7px 0px;
    
    }
    
    .col1 {
    width: 70px;
    
    }
    
    .col2 {
    width: 120px;
    
    }
    
    .col3 {
    width: 450px;
    
    }
    
    .col4 {
    width: 350px;
    
    }
    
    
    .height {
     height: 17px;
    
    }
    
    
    .mon-image {
        position: absolute;
        top: 102px;
        left: -6px;
        z-index: 2;
       
    }
    
    .tue-image {
        position: absolute;
        top: 287px;
        left: -6px;
        z-index: 2;
        
    }
    
    
    
    .strip {
    background: #f1fefe;
    }
    
    .border {
    border-bottom: 2px solid #ef7eb2;
    }
    
    
    #border {
    border-top: 2px solid #ef7eb2;
    background-color: #fff;
    }

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Nope, you're fine. My suggestion was a big fail. Remind me to never post without testing first :/

    Hopefully, a better (tested) idea will follow...

  7. #7
    SitePoint Zealot 810311's Avatar
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    132
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    No worries. We all know we all learn/learned by trial and error. Thanks for your time.

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by 810311 View Post
    No worries. We all know we all learn/learned by trial and error. Thanks for your time.
    Not to give up! I've come up with a solution that works; however, I'm trying to understand {position:relative; top:-8em;} before submitting it.

  9. #9
    SitePoint Zealot 810311's Avatar
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    132
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    no worries. thanks.

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,597
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    You can't have an image outside the <tr> tag but still inside the table as only table related tags are allowed directly inside the table tag. It needs to be inside a <tr> tag inside the <thead> in order for the HTML to be valid.

    Once your HTML is valid it should be easier to ensure that the positioning works consistently.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Zealot 810311's Avatar
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    132
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    You can't have an image outside the <tr> tag but still inside the table as only table related tags are allowed directly inside the table tag. It needs to be inside a <tr> tag inside the <thead> in order for the HTML to be valid.
    did you mean something like this,felgall :

    HTML Code:
    <thead class="border">
    <tr>
    <img class="mon-image" src="images/mon_img.png" alt="" width="113" height="113"/>
    <th scope="col" class="col1"></th>
    <th scope="col" class="col2">Время</th>
    <th scope="col" class="col3">Занятие</th>
    <th scope="col" class="col4">Преподаватель</th>
    </tr>
    </thead>
    .....or like this

    Code:
    <thead class="border">
    <tr><img class="mon-image" src="images/mon_img.png" alt="" width="113" height="113"/></tr>
    <tr>
    <th scope="col" class="col1"></th>
    <th scope="col" class="col2">Время</th>
    <th scope="col" class="col3">Занятие</th>
    <th scope="col" class="col4">Преподаватель</th>
    </tr>
    </thead>

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    This is a tested example solution to your design request... with caveats.

    CSS
    Code:
    .border div {
        position:relative;
    }
    #mon {
        position:absolute;
        top:-13px;
        left:-41px;
        z-index:2;
    }
    #tue {
        position:absolute;
        top:-22px;
        left:-36px;
        z-index:2;
    }
    #wed {
        position:absolute;
        top:-21px;
        left:-33px;
        z-index:2;
    }
    #thu {
        position:absolute;
        top:-20px;
        left:-33px;
        z-index:2;
    }
    #fri {
        position:absolute;
        top:-25px;
        left:-36px;
        z-index:2;
    }
    #sat {
        position:absolute;
        top:-22px;
        left:-36px;
        z-index:2;
    }
    #sun {
        position:absolute;
        top:-25px;
        left:-36px;
        z-index:2;
    }
    HTML
    Code:
    <tr class="border">
        <th scope="row"><div><img id="tue" src="images/tue_img.png" alt="" width="113" height="113"/></div></th>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    *** The top underline does not work properly. That row is coded differently and I have not yet figured it out. ***

    The plethora of {position:relative;top:negative-somethings} is poor code. It indicates a fundamental misunderstanding about postioning objects on a page. Likewise, the number of {margin-top:negative-somethings} tells the same tale.

    HTML is normally coded to flow smoothly and only requires negative postioning for special purposes.

    If you can apply the above example to your page, it will almost be fixed.

    The images are not consistently placed within their 113x113 image, thus the slightly different offsets.

    This has been tested in FF, Opera, Chrome.

    Sorry about the goofy post earlier. My brain sometimes takes unexplainable holidays.

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,597
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by 810311 View Post
    did you mean something like this,felgall :

    HTML Code:
    <thead class="border">
    <tr>
    <img class="mon-image" src="images/mon_img.png" alt="" width="113" height="113"/>
    <th scope="col" class="col1"></th>
    <th scope="col" class="col2">Время</th>
    <th scope="col" class="col3">Занятие</th>
    <th scope="col" class="col4">Преподаватель</th>
    </tr>
    </thead>
    .....or like this

    Code:
    <thead class="border">
    <tr><img class="mon-image" src="images/mon_img.png" alt="" width="113" height="113"/></tr>
    <tr>
    <th scope="col" class="col1"></th>
    <th scope="col" class="col2">Время</th>
    <th scope="col" class="col3">Занятие</th>
    <th scope="col" class="col4">Преподаватель</th>
    </tr>
    </thead>
    No.
    A <tr> is only allowed to contain <th> and/or <td> tags. The <img> should be inside iehter a <th> or a <td> for it to be valid within a table. The example ronpat shows has the <img> tag inside a <th> so the <tab.e> will validate and hence the CSS can work properly.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    SitePoint Zealot 810311's Avatar
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    132
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The plethora of {position:relative;top:negative-somethings} is poor code. It indicates a fundamental misunderstanding about postioning objects on a page. Likewise, the number of {margin-top:negative-somethings} tells the same tale.
    I corrected those - it works fine now when I increase fonts. I tested FF Chrome Opera. Yes, I agree that was poor code - I guess sometimes my brain is not there. Sorry. Thanks for pointing this out for me,ronpat.

    HTML is normally coded to flow smoothly and only requires negative postioning for special purposes.
    Totally agree. Best way is to allow elements take their place naturally and then apply CSS. Thanks again for reminding me.

    Here's the link for the corrected version http://yogastudio.atspace.com/

    Please, let me know if I need any more corrections.

  15. #15
    SitePoint Zealot 810311's Avatar
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    132
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    No.
    A <tr> is only allowed to contain <th> and/or <td> tags. The <img> should be inside iehter a <th> or a <td> for it to be valid within a table. The example ronpat shows has the <img> tag inside a <th> so the <tab.e> will validate and hence the CSS can work properly.
    I didn't know about those restrictions. Thanks for your advice,felgall. I've also noticed ronpat put an image inside the div
    HTML Code:
    <th scope="row"><div><img id="tue" src="images/tue_img.png" alt="" width="113" height="113"/></div></th>
    why use div inside th?

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    It looks really good to me. Nicely done!

    The validator says that the break tags are malformed:

    <samp></br></samp> should be written <samp><br/></samp>

    Related to the use of break tags... it is recommended that items be given classes, or some such targeting technique, and that margins or padding be used instead of break tags. Doing so gives you better control over the layout and eliminates unnecessary tags. Your call.

    The other thing that you can do to tidy up your code a bit is to crop the transparent area out of the day-of-week images. They will end up as 51 x 52 images.

    You will then be able to position all of them with just one css entry (instead of 7).
    Code:
    #mon,#tue,#wed,#thu,#fri,#sat,#sun {
        width:51px;
        height:52px;
        position:absolute;
        top:6px;
        left:-5px;
        z-index:2;
    }
    Of course, I would suggest replacing all of those ids with one classname.

    You can download the resized images here if you wish:
    https://www.dropbox.com/sh/e1teog7t6o13ktt/EBO8I71rJ8

    EDIT:
    Tables and table cells cannot be positioned. So, to provide an "anchor" that can be positioned, I put a <div> inside the <th> and set it to {position:relative}. The image can then be set to {position:absolute} with respect to that <div>.

    Cheers!
    Last edited by ronpat; Jul 18, 2013 at 14:46. Reason: Add note about <div> within <th>

  17. #17
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    Hi 810311,
    In addition maybe some refinements:
    • Table-cells: the empty cells can be removed, with css instead for height positioning. The <td>'s can get more line-height for better readability.
    • Top-borders: can be attached to the tables Tuesday/Sunday themselves.
    • Hidden text for the days: can stay hidden by means of absolute positioning of the day-images: above them. Tables with small height must get extra margin-bottom for compensation.
    • Images: can get some anti-alias.
    • <title>: with the town in it, visitors don't have to guess in what town the studio is. With the word Йога in it, they don't have to guess what kind of studio it is. Good for Google.

    All together the html for a table can be:
    HTML Code:
    <table class="schedule borderTop">
    	<tbody>
    		<tr>
    			<th scope="row" class="col1 day" rowspan="9">Вт<img src="images/tue_img-nw.png" alt="" /></th>
    			<td class="strip col2">8:00  9:00</td>
    			<td class="strip col3">Энергетическая йога</td>
    			<td class="strip col4">Ольга по записи</td>
    		</tr>
    		<tr>
    			<td>9:30  10:45</td>
    			<td>Постнатальная (послеродовая) йога</td>
    			<td>Ольга по записи</td>
    		</tr>
    		<tr>
    			<td class="strip">11:00  12:00</td>
    			<td class="strip">Baby  йога</td>
    			<td class="strip">Ольга Баранова, по записи, набор в группу</td>
    		</tr>
    		...
    		<tr>
    			<td class="strip">19:15  20:45</td>
    			<td class="strip">Комплексная йога</td>
    			<td class="strip">Дима</td>
    		</tr>
    	</tbody>
    </table>
    With the added css:
    Code:
    .schedule {
    	margin-bottom: 20px;
    	}
    .schedule td {
    	line-height: 140%;
    	}
    .borderTop {
    	border-top: 2px solid #EF7EB2;
    	}
    .day {
    	position: relative;
    	vertical-align: top;
    	}
    .day img {
    	position: absolute;
    	left: 0;
    	margin-top: -1px;
    	}
    .extraBottom {
    	margin-bottom: 50px;
    	}
    .bar {
    	margin-bottom: 10px;
    	}
    .imgfloat	{
    	margin-top: 15px;
    	}
    • Test page: test-yogastudio.htm
      (<br />'s are removed; the new anti-aliased images are in the source code! )

    PS: I guess the class "day" can be combined with the class "col1" (if that is not disturbing other pages).

  18. #18
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    Code:
    .col2 {
        width: 9em; /* was: 120px; */
    }
    ... and the time column is expanding with growing font-scale.

  19. #19
    SitePoint Zealot 810311's Avatar
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    132
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Related to the use of break tags... it is recommended that items be given classes, or some such targeting technique, and that margins or padding be used instead of break tags. Doing so gives you better control over the layout and eliminates unnecessary tags. Your call.
    Break tags are mostly used for single line breaks. Fixed.

    Code:
    #mon,#tue,#wed,#thu,#fri,#sat,#sun
    Selector grouping. Yes, class would work too. Thanks,ronpat.

    I also used your images.

  20. #20
    SitePoint Zealot 810311's Avatar
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    132
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Francky, I like your solution too, especially this part
    HTML Code:
    <th scope="row" class="col1 day" rowspan="9">Вт<img src="images/tue_img-nw.png" alt="" /></th>
    It allows to reduce css to the minimum. Good job! Nicely done!

  21. #21
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Thanks for the feedback, 810311. It was nice working with you!

    Yes, Francky's code for targeting the images in the top row is ideal!

    Don't lose the wrapper <div> trick, though. If you ever want to position an object within almost any cell other than the corner cells, you'll appreciate it.

    See you again sometime.

  22. #22
    SitePoint Zealot 810311's Avatar
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    132
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Don't lose the wrapper <div> trick, though. If you ever want to position an object within almost any cell other than the corner cells, you'll appreciate it.
    Sure. Thanks again. Talk soon.


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
  •