Here is an example of the problem https://jsfiddle.net/smdLzsx5/1/
Can someone please take a look and see if the bug occurs for them? I am interested in knowing if the problem can be consistently reproduced so I can report it to apple.
Code:
<html>
<head>
<style>
.header01{
background-color:#d0d0d0;
overflow:hidden;
border-radius:5px;
width:500px;
}
.heading01{
color:#ffffff;
text-shadow:0px 2px 4px #000000;
font-size:40pt;
}
</style>
</head>
<body>
<div class="header01" id="header">
<div class="heading01">
BAD<span>GOOD</span>
</div>
</div>
</body>
</html>
In certain circumstances (e.g. the above code) the text-shadow is not rendered - or it appears briefly then disappears again.
I am using MacOX 10.12.6 (16G29), Safari 11.0 (12604.1.38.1.7)
Problem does not occur on Firefox 56 or Chrome 61.0.3163.100
Many things can affect the issue such as:
Changing the width of the header01 div (change it to 200px and none of
the text-shadow renders)
Setting the header01 div to overflow:visible; (shadow renders correctly)
Changing the heading01 font size to 20pt (shadow renders correctly)
Try removing the 'overflow: hidden;' from your '.header01' class. It looks like this is causing it.
Related
.header{
z-index:3;
position:fixed;
width:100%;
height:10%;
top:0px;
background-color: white;
}
.header .header-bg {
background-color: rgba(248,221,225,0.7);
display:table;
margin:auto;
height:30px;
width:30%;
}
.header .title-center{
text-decoration: underline;
position:absolute;
margin:0;
left:50%;
top:60%;
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<link rel="stylesheet" href="css/index.css">
<div class="header">
<div class="header-bg"> </div>
<div class="title-center">header</div>
</div>
</body>
</html>
When I developed a web page, I tested it using Chrome. After finishing, I tested it with firefox/IE/Edge, and found the font-size are much smaller than it used to be in Chrome. When I checked the debug tool on Firefox, it seemed that the size of the same div is not the same for firefox and chrome. Actually, the difference is great.
More wierd, when I click into a modal in chrome, and refresh the window, the path changed to index.html#, then, the layout and div size is almost the same as the other browsers.
Anyone has idea why this happened? and How to deal with it? Thanks in advance!!
The following is part of my code for header.
You should add any default font-family in your css after that you can see same fonts on all browser
and add reset css from http://html5doctor.com/html-5-reset-stylesheet/ in header section!
a) Each browser will have their own default font size predefined.
1) For chrome : Setting > Show Advanced setting > Web Content > Font size
2) For Firefox : Tools > Options > Content > Fonts & Color
Whenever the CSS doesn't have font size mentioned in their styles, browser will use their predefined default font size. Better define font-size in your CSS.
b) index.html# issue
Whenever you click on any clickable elements usually anchor hyperlink, browser tries to navigate to that page or section where the href="" if pointing. When a hyperlink doesn't have href="" we'll get "#" as a dummy pointer. Example
Test link or Test link
Refer : https://developer.mozilla.org/en/docs/Web/HTML/Element/a
Each web browser has different defaults for font so you want to reset you CSS before adding your custom style.
Have a read of http://cssreset.com/what-is-a-css-reset/
The problem may be initial values of some elements that differ through browers. The easiest and most reliable way to solve it would be using something like Normalize.css.
I believe there may be a bug in chrome's rendering of border colors. Here is the setup:
Create an element (I have seen it on div's as well as td's, both position:static and position:absolute).
Make this object more than twice as tall as it is wide
Assign a different color border to each side.
Specify a border-radius for rounded corners.
The end result is that a the middle portion of the left edge takes on border-right-color instead of border-left-color. Specifically, if w is the width of the object, then the top w pixels and the bottom w pixels are correct, but the middle (h - 2w) pixels are colored incorrectly.
Here is a snippet of code and a screenshot demonstrating the issue.
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<html>
<head>
<style>
div#borderBug
{
position:absolute;
top:10px;
left:10px;
width:152px;
height:541px;
border-width: 2px;
border-style: solid;
border-radius: 20px;
border-left-color: blue;
border-top-color: yellow;
border-right-color: red;
border-bottom-color: green;
background-color: #dedede;
}
</style>
</head>
<body>
<div id="borderBug"></div>
</body>
</html>
My version of Chrome is 17.0.963.56 m, running on Windows XP. I do not see the issue in Safari, Firefox, or IE8.
Can anyone confirm if this is a known issue, or does anyone know of a standard workaround?
The best workaround I can think of is using an image for the border, but I have not yet been able to test this and see whether it suffers from the same bug.
Another (ugly) option might be to place another HTML Element of the correct color on top of the offending section of border.
Confirmed known issue:
Issue 106028
merged into Issue 113726
I've merrily hacking away at this website, testing it in Firefox and Internet Explorer 9, taking for granted that Safari and Chrome will render my CSS3 fine, when I've just discovered they don't.
In FF and IE9 I see this:
In Safari/Chrome I see this:
Here's the HTML:
<div class="container">
<div>
<img src="static/images/image1.jpg" alt="" />
</div>
Here's the CSS:
.container {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius: 10px;
}
What am I doing wrong? :(
UPDATE
Please see a working example of the problem I'm having: http://jsfiddle.net/jAsnU/3 Thanks.
try:
.container img {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius: 10px;
}
Try adding "overflow:hidden;" to the style of the div. I made a quick test page up at jsfiddle and it seemed to work (tested it in Chrome, Safari and FireFox): http://jsfiddle.net/wabw8/
You might want to try to set the border radius on .container div img.
I think you need to specify a border.
So, something like this:
border:1px solid blue; //whatever blue you are using.
It looks as though FF and IE are giving you the rounded border... but as a blank item that is cutting off the image.
I've never ran into this problem before.
The menu looks good on Windows, but it breaks in Firefox, Chrome and Safari on Mac OS (saw this by using browsershots). I don't have access to a mac so I can't debug it properly. I think it might be cause by different letter spacing or size. Does anyone have experience with this?
Thanks!
I'm viewing the site in firefox on a mac, and it looks like the div with id="wrapper" is not long enough to contain the menu.
Either increase div#wrapper to 960px:
#wrapper {
margin:0 auto;
width:980px;
}
or decrease size of menu font to 16px:
#mainMenu ul li a {
background:url("images/bk_menu.gif") repeat-x scroll 0 0 transparent;
color:#175689;
display:inline-block;
font-size:16px;
height:30px;
overflow:hidden;
padding:16px 19px 0;
text-decoration:none;
}
As far as I can see, it looks fine in Safari 4, unless you post a screenshot. But it might be that you have <div id="top-links"> occurring twice: [Invalid]Markup Validation of clients.newblack.ro integra - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.
I'm having some trouble getting this layout to work correctly in IE. The problem is that when I have a bit of small-caps, underlined text, an image with vertical-align set to middle breaks up the underline. Lower case letters have their underline shifted down. See the picture.
This looks fine in Firefox, Chrome and Opera, but it's broken in every version of IE that I tried, including 8. This happens for underlined links as well. Here's the code:
<html>
<head>
<title>Test</title>
<style type="text/css">
img { vertical-align: middle; }
span { text-decoration: underline; font-variant: small-caps; }
</style>
</head>
<body>
<img src="pic.png">
<span>Abc QWerty AbCdEfGhIjKlMnOpQrStUvWxYz1234567890</span>
</body>
</html>
Thanks for any suggestions.
If you don't care about CSS validation adding a zoom:1 declaration (or any other hasLayout invoking declaration) to your span style will solve the problem (in IE6/7 at least).
I also haven't managed to get this to work (zoom:1 does nothing for me). I now resorted to using border-bottom instead of underline...