Problem in display in safari

HTML & CSS
1

Hello I am using below code to display data from database.
It is good in Chrome but distorted in Safari. What should i do to fix it?
Images are here:

first screenshot is for safari and next for chrome.

<style type="text/css">

#globe{float:right; margin-top:1%; padding:3px; padding-right:8px;background-image: url(css/forum/yell.jpg);
	background-position: center center; color:blue; font-weight:bolder;clear:both;}
	#blogdata{width:75%; margin:auto; border:2px solid silver; min-height:450px; background-image:url(css/images/yell.jpg); background-size:cover; font-weight:bolder; padding:3px; overflow:hidden;}
	.imge{width:100%; height:150px; display:inline-block; clear:both;}
	.img-wrap{
	margin:0 1% 20px 1%;	
	width:22%;
	display:inline-block;
	*display:inline;/* ugly ie7 and ie6  hack - delete if not supporting*/
	zoom:1.0;/* ugly ie7 and ie6  hack - delete if not supporting*/
	vertical-align:top;
}
.imge img{
	display:block;clear:both;
	width:100%;
	height:150px;/* if you want a fixed height then change this*/
}
p.title{
	padding:5px 0;
	text-align:center;
	margin:0;word-wrap:break-word;
}
</style>

<div id="blogdata">

  <div class="img-wrap"><div class="imge"><p class="title">Books and Novels</p><a href="newsection.php?id=1"><img src=css/forum/books.jpg width="100%" height="150px" alt="Section" /></a><p class="title">Books and Novels</p><hr/></div></div>
<div class="img-wrap"><div class="imge"><p class="title">Bussiness</p><a href="newsection.php?id=2"><img src=css/forum/bussiness.jpg width="100%" height="150px" alt="Section" /></a><p class="title">Bussiness</p><hr/></div></div>
<div class="img-wrap"><div class="imge"><p class="title">Education</p><a href="newsection.php?id=3"><img src=css/images/education.jpg width="100%" height="150px" alt="Section" /></a><p class="title">Education</p><hr/></div></div>
<div class="img-wrap"><div class="imge"><p class="title">Fashion</p><a href="newsection.php?id=4"><img src=css/forum/fashion1.jpg width="100%" height="150px" alt="Section" /></a><p class="title">Fashion</p><hr/></div></div>
<div class="img-wrap"><div class="imge"><p class="title">Finance</p><a href="newsection.php?id=5"><img src=css/forum/dollar.jpg width="100%" height="150px" alt="Section" /></a><p class="title">Finance</p><hr/></div></div>
<div class="img-wrap"><div class="imge"><p class="title">Food</p><a href="newsection.php?id=6"><img src=css/forum/Food_background.jpg width="100%" height="150px" alt="Section" /></a><p class="title">Food</p><hr/></div></div>
<div class="img-wrap"><div class="imge"><p class="title">Health</p><a href="newsection.php?id=7"><img src=css/forum/healthcare-icon.jpg width="100%" height="150px" alt="Section" /></a><p class="title">Health</p><hr/></div></div>
<div class="img-wrap"><div class="imge"><p class="title">History</p><a href="newsection.php?id=8"><img src=css/forum/history.gif width="100%" height="150px" alt="Section" /></a><p class="title">History</p><hr/></div></div>
</div></div>
2

Hi,

The element called .imge is 150px high yet you have placed inside it an image that is 150px high plus a paragraph on the top and on the bottom which will both exceed the set height and therefore overlap.

Either remove the height from .imge or remove the paragraphs from within .imge and place them above and below that .imge div.

3

The code seems to work fine for me IF you put it on a working page with a valid <!doctype>. I do not have Safari, but FF and Opera fail without a doctype, too. :slight_smile:


<!DOCTYPE html">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Safari prob?</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1228920-problem-in-display-in-safari
2014.08.17 11:33
shail.arya
-->
    <style type="text/css">
#globe {
    float:right;
    margin-top:1%;
    padding:3px;
    padding-right:8px;
    background-image:url(css/forum/yell.jpg);
    background-position:center center;
    color:blue;
    font-weight:bolder;
    clear:both;
}
#blogdata {
    width:75%;
    margin:auto;
    border:2px solid silver;
    min-height:450px;
    background-image:url(css/images/yell.jpg);
    background-size:cover;
    font-weight:bolder;
    padding:3px;
    overflow:hidden;
}
.imge {
    width:100%;
    height:150px;
    display:inline-block;
    clear:both;
}
.img-wrap {
    margin:0 1% 20px 1%;	
    width:22%;
    display:inline-block;
    *display:inline; /* ugly ie7 and ie6  hack - delete if not supporting*/
    zoom:1.0; /* ugly ie7 and ie6  hack - delete if not supporting*/
    vertical-align:top;
}
.imge img {
    display:block;clear:both;
    width:100%;
    height:150px; /* if you want a fixed height then change this*/
}
p.title {
    padding:5px 0;
    text-align:center;
    margin:0;word-wrap:break-word;
}

    </style>
</head>
<body>

<div id="blogdata">
<div class="img-wrap"><div class="imge"><p class="title">Books and Novels</p><a href="newsection.php?id=1"><img src=css/forum/books.jpg width="100%" height="150px" alt="Section" /></a><p class="title">Books and Novels</p><hr/></div></div>
<div class="img-wrap"><div class="imge"><p class="title">Bussiness</p><a href="newsection.php?id=2"><img src=css/forum/bussiness.jpg width="100%" height="150px" alt="Section" /></a><p class="title">Bussiness</p><hr/></div></div>
<div class="img-wrap"><div class="imge"><p class="title">Education</p><a href="newsection.php?id=3"><img src=css/images/education.jpg width="100%" height="150px" alt="Section" /></a><p class="title">Education</p><hr/></div></div>
<div class="img-wrap"><div class="imge"><p class="title">Fashion</p><a href="newsection.php?id=4"><img src=css/forum/fashion1.jpg width="100%" height="150px" alt="Section" /></a><p class="title">Fashion</p><hr/></div></div>
<div class="img-wrap"><div class="imge"><p class="title">Finance</p><a href="newsection.php?id=5"><img src=css/forum/dollar.jpg width="100%" height="150px" alt="Section" /></a><p class="title">Finance</p><hr/></div></div>
<div class="img-wrap"><div class="imge"><p class="title">Food</p><a href="newsection.php?id=6"><img src=css/forum/Food_background.jpg width="100%" height="150px" alt="Section" /></a><p class="title">Food</p><hr/></div></div>
<div class="img-wrap"><div class="imge"><p class="title">Health</p><a href="newsection.php?id=7"><img src=css/forum/healthcare-icon.jpg width="100%" height="150px" alt="Section" /></a><p class="title">Health</p><hr/></div></div>
<div class="img-wrap"><div class="imge"><p class="title">History</p><a href="newsection.php?id=8"><img src=css/forum/history.gif width="100%" height="150px" alt="Section" /></a><p class="title">History</p><hr/></div></div>
</div>

</body>
</html>

The attributes for the image sizes should not contain units of measure. width=“100” height=“150” is valid.

The CSS values should contain units of measure such as px or %.

4

It fails in Safari even with a doctype Ron :slight_smile:

5

Hi… i placed the <p> elements before div and it worked… thanks once again.

6

I am using <!doctype>

7
Off Topic:

Oops. Sorry, I didn’t see your post. Good that you could test in Safari :slight_smile:

8

When you post code like that, please be sure it is a “working page”… starts with a valid !doctype and ends with </html>.

Thank you.

9

Ok… i will take care of that from now… thanks :slight_smile:

10

I have been playing with your code and believe this is a stronger structure. I would be grateful if you would test it in Safari and see how it performs.
Don’t be concerned with the indented HTML. I do that routinely so I can visualize the structure of code. My peculiarity. :slight_smile:

I believe that your code relies on uncontained margins which allow close vertical alignment of the .img-wrap boxes. In this revision, I have “contained” the margins. Notice that you do not need to apply a min-height to #blogdata.

Another change that you may or may not care for is the missing <hr> tags. Nowadays, the <hr> tag has semantic significance such that it divides major sections of a page. This is more significant that just drawing a horizontal line. I have replaced the <hr> line with a 2px bottom border on .img-wrap. The last row of .img-wrap divs is also classed .lastrow which removes the bottom-border. Granted, the <hr> tag was easier to manage, but its use has changed in modern code. I left the <hr> code in CSS in case you can’t live without it.

I left a few outlines inside comment marks. You can remove the left comment mark to see the box to which it is assigned.

This works in IE8+.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Safari prob?</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1228920-problem-in-display-in-safari
2014.08.17 11:33
shail.arya
-->
    <style type="text/css">
#globe {
    float:right;
    background-image:url('css/forum/yell.jpg');
    background-position:center center;
    color:blue;
    font-weight:bolder;
    clear:both;
    padding:3px;
    padding-right:8px;
    margin-top:1%;
}
#blogdata {
    width:75%;
    border:2px solid silver;
    background-image:url('css/images/yell.jpg');
    background-size:cover;
    font-weight:bolder;
    text-align:center;
    overflow:hidden;
    padding:3px;
    margin:auto;
}
.img-wrap {
    width:22%;
    display:inline-block;
    vertical-align:top;
    *display:inline; /* ugly ie7 and ie6  hack - delete if not supporting */
    zoom:1.0; /* ugly ie7 and ie6  hack - delete if not supporting */
    border-bottom:2px solid #888;  /* instead of the hr tag */
    margin:0 1%;    
}
.img-wrap.lastrow {border-bottom:0;}  /* removes the border-bottom from the last row of img-wrap boxes */

.imge {
    width:226px;
    height:150px;
}
.imge img {
    display:block;
    width:100%;
    height:150px; /* if you want a fixed height then change this */
/*    outline:1px solid blue; /* */
    background-color:#ccc; /* missing image background-color */
}
p.title {
    text-align:center;
    word-wrap:break-word;
    padding:5px 0;
    margin:0;
/*    outline:1px solid lime; /* */
}

hr {margin:3px auto 1px;}

    </style>
</head>
<body>

<div id="blogdata">
    <div class="img-wrap">
        <p class="title">Books and Novels</p>
        <div class="imge">
            <a href="newsection.php?id=1"><img src=css/forum/books.jpg width="226" height="150" alt="Section"></a>
        </div>
        <p class="title">Books and Novels</p>
    </div>
    <div class="img-wrap">
        <p class="title">Bussiness</p>
        <div class="imge">
            <a href="newsection.php?id=2"><img src=css/forum/bussiness.jpg width="226" height="150" alt="Section" /></a>
        </div>
        <p class="title">Bussiness</p>
    </div>
    <div class="img-wrap">
        <p class="title">Education</p>
        <div class="imge">
            <a href="newsection.php?id=3"><img src=css/images/education.jpg width="226" height="150" alt="Section"></a>
        </div>
        <p class="title">Education</p>
    </div>
    <div class="img-wrap">
        <p class="title">Fashion</p>
        <div class="imge">
            <a href="newsection.php?id=4"><img src=css/forum/fashion1.jpg width="226" height="150" alt="Section"></a>
        </div>
        <p class="title">Fashion</p>
    </div>
    <div class="img-wrap lastrow">
        <p class="title">Finance</p>
        <div class="imge">
            <a href="newsection.php?id=5"><img src=css/forum/dollar.jpg width="226" height="150" alt="Section"></a>
        </div>
        <p class="title">Finance</p>
    </div>
    <div class="img-wrap lastrow">
        <p class="title">Food</p>
        <div class="imge">
            <a href="newsection.php?id=6"><img src=css/forum/Food_background.jpg width="226" height="150" alt="Section"></a>
        </div>
        <p class="title">Food</p>
    </div>
    <div class="img-wrap lastrow">
        <p class="title">Health</p>
        <div class="imge">
            <a href="newsection.php?id=7"><img src=css/forum/healthcare-icon.jpg width="226" height="150" alt="Section"></a>
        </div>
        <p class="title">Health</p>
    </div>
    <div class="img-wrap lastrow">
        <p class="title">History</p>
        <div class="imge">
            <a href="newsection.php?id=8"><img src=css/forum/history.gif width="226" height="150" alt="Section"></a>
        </div>
        <p class="title">History</p>
    </div>
</div>

</body>
</html>
11

Hi… i tried this code and its working fine… all browsers are supporting it… Thanks for the info too on <hr> tags.
:slight_smile: