Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Robert Marczak
Robert Marczak
12,358 Points
Posted by Robert Marczak
Robert Marczak
12,358 Points

Safari not displaying table like others(chrome, mozilla, opera , IE)

Why in resolution of 320px safairi is displaying content diffrent then other browsers. What I mean is table fits nicely in this resolution in browsers mentioned in the title but in safari it sticks out. Width is fixed at 320px for main wrapper and rest of the elements inside uses percentages as width.

code:

    width:320px;
    margin:0 auto;
    padding:0;  
    background-color:#fff;
    opacity:.9;
}

 other elements inside and then table:

.timetable-wrapper{
    width:98%;
    margin:0 auto;
    padding:1%;
}
.timetable-inner{
    width:98%;
    padding: 0;
    margin: 1% 2%;
}
.timetable-inner h2{
    font-family: 'Audiowide', cursive;
    font-weight: normal;
    font-size: 1em;
}
.timetable-inner p {
    font-family: 'Comfortaa', cursive;
    line-height: 20px;
    font-size: .65em;
}
.timetable{
    width:100%;
    padding: 0;
    margin: 0;
}
table {
    width: 98%;
    padding: 0;
    margin: 1%;
    font-family: 'Audiowide', cursive;
}
table caption {
    text-align: left;
    font-size: 1em;
    padding: 1%;
}
table th{
    font-size:.5em;
    padding: 1%;
}
table td{
    font-size: .5em;
    text-align: center;
    font-family: 'Comfortaa', cursive;
}

3 Answers

Robert Marczak
Robert Marczak
12,358 Points
Robert Marczak
Robert Marczak
12,358 Points

Thanks mate I don't know how did I see it looks diffrent where it doesn't. I need glasses probably.

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Did that solve you issue, man? :)

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

I'm not sure, but it may be that your margin and padding is adding extra width and height to your tables.

Try this at the top of you css document:

* { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

The universal selector * will choose all elements etc in the html docment and instead of allowing the margin and padding to flow outside of the set width, it recalculates the width to INCLUDE the paddings and margins, so it does not flow out of the expected area.

Let me know if it works :)

Robert Marczak
Robert Marczak
12,358 Points
Robert Marczak
Robert Marczak
12,358 Points

Thanks a lot for your help. As I posted before diffrence was the same in all browsers and I need to start wearing glasses :). Until next time Liam.

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Ah! Now that makes sense. No worries man. Have a good one :)