I have a strange issue with google chrome:
With the following code:
<li class="smallAds fleft">
<a href="news">
<img class="addBorder" src=".." alt="Dialetu news!" />
</a>
</li>
The li element on firefox and other browsers is 190px width but on chrome is 190.016px. This small diference is enough to ruin the layout.
Anyone knows why this happens?
This only happens on Chrome for mac, on windows it works perfectly. Also my css rules don't have the width for the li element, since it should inherit the width of the img.
The relevant CSS here is the one associated with the image, since the above elements don't have any specific style:
#afterSlideShowSection ul li img {
border-right: 2px solid #fff;
box-sizing: border-box;
height: auto;
margin-top: 2px;
width: 190px;
}
Seems to be an issue in chrome:
https://code.google.com/p/chromium/issues/detail?id=491328
Related
In IE11 and Edge (on Windows 10), the following HTML/CSS displays a strange, transparent border where there shouldn't be.
<!DOCTYPE html><html>
<head>
<style>
body {
background-color:red;
font-size: 10pt;
}
.menu {
background-color: #5f6062;
overflow:hidden; /* To contain floats */
box-sizing: content-box;
}
.right-menu {
float:right;
margin:auto;
padding:0 0 0 20px;
list-style: none;
}
.spacer {
background-color: #ffffff;
height: 20px;
}
.content {
background-color: #ffffff;
border-radius:0 0 10px 10px;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="menu">
<ul class="right-menu">
<li>Link</li>
</ul>
</div>
<div class="spacer"></div>
<div class="content">
<div class="content-title">There shouldn't be a 'border' above this...</div>
</div>
</body>
</html>
JSFiddle (You may need to resize the window vertically to see the 'border' fade in and out in JSFiddle — which is even stranger.)
The most interesting part is that the issue seems to be caused by border-radius. If I remove it, the 'border' is gone. It will also go away if I remove some other element (the .menu div for example), but that is less of an option since I would prefer not having to mess with the structure of the site having this problem.
I've found mentions of background-clip: content-box or padding-box as a solution, but it doesn't seem to work here.
Also of note, while trying to reduce the size of my demonstration, I ended up with a code that showed the border in JSFiddle, but not in a plain HTML file. This is the smallest I could get to display the 'border' both inside JSFiddle and a plain HTML file.
Found the bug in EDGE's Platform Issues but still would like to find a workaround...
It looks like IE is rendering a transparent border to display the border-radius but picks the 'background' color further down the layers than it should (in my sample, using red instead of white).
So I went with workarounds...
On my actual page, two elements are having this bug. For one my workaround was to set the background-color of another element further behind the one with border-radius and for the other to set an actual border the same color as the element's background.
Can anyone tell me why the absolutely positioned navigation buttons in the top right corner of this page are not visible in ie7, but are working fine in all other browsers (including ie8 and 9)
Thanks!
For one you are using display:inline-block which isn't properly supported by IE7 or below (sometimes it works, others not -- depends on the element and the situation).
Use display:block and float:left instead as this is more supported (however if you see my first link you can using display:inline too).
Don't forget to include overflow:hidden in the surrounding UL element either otherwise you'll get strange results due to the float.
css:
#navlist {
list-style: none;
margin: 0;
padding: 0;
display: block;
overflow: hidden;
}
#navlist li {
list-style: none;
margin: 0;
padding: 0;
display: block;
float: left;
/* your styles from before */
background-color: #F2F2F2;
border-radius: 5px 5px 5px 5px;
color: black;
height: 20px;
padding-top: 2px;
text-align: center;
width: 20px;
}
markup:
<ul id="navlist">
<li id="li1">
<a id="link1" href="#">1</a>
</li>
<li id="li2">
<a id="link2" href="#">2</a>
</li>
<li id="li3">
<a id="link3" href="#">3</a>
</li>
<li id="li4">
<a id="link4" href="#">4</a>
</li>
</ul>
useful links:
http://aaronrussell.co.uk/legacy/cross-browser-support-for-inline-block/
http://www.quirksmode.org/css/display.html#t03
update:
Another thing you could try (if the above doesn't solve the problem) is to temporarily remove your conditional commented code for IE7 - just to make certain there isn't anything in there causing a problem:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<script type="text/javascript" src="Scripts/ie7.js"></script>
<![endif]-->
update:
Now that I've been able to actually test in IE7 the problem shows up if you enable borders - using css borders to debug is always a good idea :) The problem above is being caused by an child element pushing out the width of your parent element innerWrap. This wont affect more modern browsers, but IE7 and older always try and wrap their children no matter where they are placed or what size they are (unless you override this behaviour). Because your child element slideWrap is 3000px wide, it is causing your right positioned elements to vanish off the edge of the screen.
The following css should fix it:
#innerWrap { width: 100%; }
Use left or right properties with it in order to make them visible.
I've submitted this to the Webkit bugzilla (including full CSS and HTML) a week ago but didn't receive a response so far. In the mean time, I'd like to know if it's me or Webkit doing something strange. I already found a workaround, just looking for answers on what's exactly causing this difference.
Here's what I'm experiencing:
(source: mindcontrolled.nl)
Tested in Chrome 10.0.648.204, Safari 5.0.3 (7533.19.4), Firefox 4.0 and a version of IE 8.
This is the related code. I already isolated this code in the HTML to see if surrounding objects caused the trouble but the problem remains.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
[...]
<div id="top">
<div id="logo">
<strong><span style="color: #005288;">pre</span><span style="color: #00aeef;">view</span></strong> <span style="color: #fcaf17;">website</span>
</div>
<div id="topmenu">
<ul>
<li><span>over</span> ons</li>
<li><span>onze</span> partners</li>
<li>contact</li>
<li>helpdesk</li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
And the CSS:
#container, #top, #contentcontainer {
padding: 12px;
}
#logo {
float: left;
margin: 0;
font-size: 2em;
letter-spacing: -2px;
}
#topmenu ul, #mainsubmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#topmenu li, #mainsubmenu li {
display: inline;
}
#topmenu li {
margin-left: 20px;
}
#topmenu li:first-child {
margin-left: 0;
}
#topmenu a {
color: #005288;
}
#topmenu a:hover {
color: #00aeef;
}
#topmenu a span {
color: #005288;
}
I started by measuring all the divs to see if they had the same, auto-calculated sizes in both Gecko and Webkit, and they all have the exact same measurements for width (but of course the height is different on Webkit). It's 390 px in Chrome's Firebug lite as well as in Firefox (4) DOM-inspector.
Even if those 390 pixels wouldn't have been enough to fit the full list, the div could simply have expanded to the left. This could perhaps be the case when fonts render a little differently or
What's also strange is that if I remove
#topmenu li:first-child {
margin-left: 0;
}
from the CSS, that doesn't do anything to the position of the first element in the list. Instead, it changes the position of the LI on the second line! "Helpdesk" will then align with "Over ons" strangely enough.
My workaround:
If I define a fixed width for the topmenu DIV of at least 390 (current width) plus 20 pixels (the margin I remove using first-child) for a minimum total fixed width of 410 pixels, all elements stay on the same line.
Love to hear what everyone has to say on this.
I created a jsfidle and tested it in Chrome and Firefox, but I can't reproduce your findings. Have you perhaps got more/different html/css than the fragments you posted? I get basically the same thing in both browsers and the margin applied on #topmenu li:first-child does what it is supposed to do in both as well.
I have Chrome 10 and Firefox 3.6.16 on a Mac with Snow Leopard.
This is Chrome:
And Firefox:
I've figured out what's wrong: you're using an explicit web page width. Because of this, the last item doesn't fit even if the browser window is wide enough, because you aren't giving it enough space.
To fix this, don't specify a width for your web page and redo your CSS to adapt to the width of the browser window.
I have an annoying display issue in IE (7/8). I have some tabs that serve as navigation, the tabs have the top and bottom sections cut off for some reason in spite of my efforts to make the box bigger.
In Chrome and Firefox this all displays correctly as you can see in the images below. Note I have artificially moved the tabs into an empty area of the page so its easier to see whats going on.
How it looks in IE:
How it looks in Chrome
Now obviously IE doesn't render the rounded corners, that's fine (unless someone knows something I dont) but as you can see the height of the links in IE are smaller than Chrome and actually clip the top border off.
HTML
The HTML is simply <a> elements within a <div> like so
<div id="topnavcontainer">
<a href='/web/link1.html' class='current'>Link 1</a>
<a href='/web/link2.html'>Link 2</a>
<a href='/web/link3.html'>Link 3</a>
</div>
CSS
#topnavcontainer {
display: block;
color: #fff;
font-size: 14px;
position: absolute;
right: 0;
bottom: 0;
height: 40px;
}
#topnavcontainer a {
color: #555;
text-decoration: none;
padding: 5px 12px;
font-weight: 800;
overflow: visible;
background-color: transparent;
border: 0;
line-height: normal;
bottom: 0;
height: 40px;
}
As you can see I have tried to overcome the problem by specifying normal line-height as well as making the overflow visible. I have also tried making the links and containing div much higher than they should be just in case there was a weird height issue. Nothing seems to solve it.
Set the link to "display: inline-block;". As for IE6/7, do "display: inline; zoom: 1;" instead.
I've seen this problem happen before on block elements. The "inline-block" solution seemed to fix it.
Try adding float:left;
It's possible that your padding isnt even working.
if this solution doesnt work,
make a different CSS for IE and set a different height for IE.
also, try to put a button on your website asking your visitors to download Firefox or Chrome...
it will make the internet better! :D
I have a gallery with a frame around the thumbnails, I have used max-width to shrink the thumbnail images so they all line up nicely, but in IE althought the image shrinks to the max width the frame still expands as if the image was larger. I have tried adding a max-width to the li but to no avail.
Here is a link to the page that looks nice and uniformed in Chrome and FF bt all over the shop in IE! http://wedding-photography-gloucestershire.co.uk/wedding-photography-gallery.php?gallery=Getting%20Ready
Wedding Photography Gallery
thanks in advance of any help.
This is the frame style..
.highslide-gallery ul li {
display: block;
position: relative;
float: left;
width: 106px;
height: 106px;
border: 1px solid silver;
margin: 2px;
line-height: 0;
overflow: hidden;
background-color: #000;
max-width: 106px;
}
I tried adding this which I found on another website as a solution to IE max width problems, but i don't really understand it ;
width:expression(document.body.clientWidth > 106? "106px": "auto" );
but it still didn't work.
Thank you.
IE treats padding/margin differently than the other browsers. I looked at your stylesheet (highside) and you need to have a stylesheet for ie specifically and then you can target IE specifically without worrying about how the changes you make effect the other browsers. I personally wouldn't do that but I used to do it when I was experimenting in web development.
The easiest way for you to figure out what's going wrong and where it is going wrong is to use firebug. Safari and IE have similar debug environments as well. There are some really good tutorials on using firebug out on http://net.tutsplus.com
Good luck.