This is a weird "bug", I cant reproduce it always, but on the fiddle test case seems to fail more often. This is ONLY showing in chrome/windows, I couldn't reproduce it in IE at least and someone confirmed it doesn't happen in chrome/Linux.
The fiddle: http://jsfiddle.net/u25zr/2/
As you can see, text is not horinzontally aligned.
A weird thing: if you right-click on the text, click "inspector tools" and untick/tick again the font-family property, it magically fixes.
I attach an image so you can see what should happen:
Since I used a jsfiddle link, I need to add a code block also, so ill just add the markup, which is not related at all...
<div class="recipe">
<div class="recipe-top">
<div class="category">Text</div>
<h2>Test Recipe 1</h2>
<div class="date">12 Jan 2013</div>
</div>
</div>
EDIT: Moving the SVG font to the bottom so Chrome uses the woff instead of the svg fixes the problem. So it looks like the problem its in the SVG rendering.
Well, after some wasted hours this seems to be a (another) chrome bug.
https://code.google.com/p/chromium/issues/detail?id=95102
And i also found a solution here:
Chrome svg-Font-Rendering breaks Layout
Which is good, but doesnt validate CSS. Anyway nothing else we can do.
Related
I am having a strange issue while implying a transform effect at firebox browser.
Demo Link
"http://codepen.io/uzess/pen/zvOgmd"
Issue Explanation
1) The code works fine for chrome and safari, but the transform effect is not showing properly at Mozilla Firebox
2) The code also works fine for three images in all the browsers, but it didn't work properly at Firebox for four and more images.
Any help will be highly appreciated :)
Regards,
Biplab
It seems like when you add more than 3 items, there occurs errors ( irregularity ).
It is due to the css display properties.
Use
<div class="col-md-2" style="display: list-item">
or
<div class="mane1 contact" style="display: list-item">
Main thing here is display: list-item.
Please see fixed version here http://codepen.io/codersantosh/pen/yYLOvP
I'm new to css and have been getting by fine so far from going through tutorials and reading some of the great advice on this site but I just cant get my head around this one. I am trying to achieve a Polaroid effect using css and am getting some weird effects on my website. I have tested the code on jsfiddle and it works fine, I even copied the entire sites css and it still worked fine in jsfiddle. But as soon as I use that code on my website the margins, padding, rotation etc. are wrong.
Please help I'm at a loss here and don't know what could be affecting it, my only idea is that for some reason the css selectors I am using are not selecting the elements properly.
The site page is: http://kamhairandmakeup.co.uk/vintage/
The JSFiddle is:
<iframe width="100%" height="300" src="http://jsfiddle.net/deepwaterlizard/NxsUQ/1/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
or
http://jsfiddle.net/deepwaterlizard/NxsUQ/1/
I can post the css and html here if needed but didn't want to take up too much space, thank you in advance.
I am not entirely sure, but for starters, the first image (black and white) has this html on your site:
<p>
<!--the caption that appears below the image-->
<br>
</p>
after figcaption tag and its not present in your fiddle.
Looks like you are using Wordpress. Its editor will generate a lot of <p> tags, e.g. for each new line, it will generate <p> </p> or empty <p></p>
I've a page whose styling gets messed up in Chrome (no problem for Safari and others). It seems that it inserts for a reason some strange whitespace in the HTML that ruins my layout at the top of the page and in other places.
If I choose to see the source of my PHP page, what I see is:
<body><div id="header-outer">
<div id="header" class="container">
<div class="row">
<div id="site-logo" class="span5">
<img src='logo.png' />
</div> ... etc ...
(I've modified the PHP to have no space whatsoever between BODY and DIV). But when I open the developer tools what I see is:
<body>
"" <- why?
<div id="header-outer> etc. etc..
If I manually delete the "", the layout just goes fine. What is happening here? I'm puzzled.
EDIT: you can see the page at http://bit.ly/ZkZxVG
EDIT: I've tried to disable all extensions, but with no effect on my issue.
Hint: I'm using bootstrap and JQuery. Could they mess with the code?
It's really weird, you might have some undesired char within your file, try removing <body><div id="header-outer"> and rewrite it down.
Try encoding your file with utf8 No BOM too and see if it resolves the problem.
More infos about utf8 BOM here.
Edit
Thats not white space, they must be a physical charter in there. This might not be displayed on your screen, but just press delete and backspace until you have the next element in your markup.
white space in HTML is completely ignored by the browser, it does not render it. Looking in Firebug you have "" rendered when editing the item.
Take a look at this page in FireFox. Feel free to navigate to any of the top six product categories to see more of the same type of code.
If you are [un]lucky enough to see the glitch, you will see at least one product box expand it's height to epic proportions.
Here is the code:
<div class="product_category">
<a href="../products/dht_1500.php" style="height: 340px;">
<h3>DHT 1500</h3>
(superfluous HTML omitted here)
</a>
</div>
Here is what Firebug reveals:
<div class="product_category">
<a style="height: 340px;" href="../products/dht_1500.php"> </a>
<h3><a _moz-rs-heading="" style="height: 340px;" href="../products/dht_1500.php">DHT 1500</a></h3>
(superfluous HTML omitted here)
<a style="height: 340px;" href="../products/dht_1500.php"> </a>
</div>
You can see FireFox is definitely closing my tags and re-opening them again, and pulling the custom CSS height style along with it, which is resulting in each product box height skyrocketing. Also note that strange _moz-rs-heading="" bit.
I suspect my problem has to do with my using block HTML elements within an inline tag, but I thought I solved that problem by converting the tags to block formatting in my stylesheet:
.product_category a {
display: block;
}
FireFox is playing favorites to my tags. It usually renders the page like I want it, but then every once-in-a-while, it will blow one of my product boxes sky-high, and seemingly at random.
The pages work properly in Internet Explorer and Safari. I have been testing it with FireFox 3.6 on Mac, but have seen the same problem on FireFox for PC.
Having block level elements (h3) inside an inline element (a) is not valid HTML.
Change your block elements to a span and use CSS to style it how you wish.
A similar question with the exact same symptoms was asked a few days back. The solution there was in fact taking the native block elements out of the natively inline ones. Seems changing display doesn't help in this case.
I have a page that there is a list of "tags", just like here in SO, and when the mouse is over it, it gets darker.
It works great with Ie7, 8, FF, Chrome, Safari etc... but IE6 has a bug that when a:hover is triggered.
The bug is that the div that those (ul li a) are contained, gets a height's increase.
the css I have is:
div.options ul.tags li a:hover
{
background-color: #D5E4A5;
}
if I delete this style or just comment "background-color: #D5E4A5;" it doesn't happen...
any idea of how to fix it?
thanks!
EDIT: Here's a screenshot of the bug:
just fixed it! :D
what I had before was:
<div class="options clearfix">
<!--content here-->
</div>
and I replaced for:
<div class="options">
<div class="clearfix">
<!--content here-->
</div>
</div>
Now IE6 is happy, and I'm happy as well...
Thank you everybody for your help!
This is usually a border getting set that wasn't defined originally. Try setting a border on the growing DIV to the default background color. My guess is that you won't see anyting grow anymore.
I think I ran into this once, and what was happening was that the borders were being modified (or was it the margins?) I ended up copping out, and just giving the problematic elements a transparent border of 1px, and calling it a day.
I really doubt this will turn out to be your solution, but I'm hoping it'll give you some idea in which direction to look in!
I've had that happen to me as well, but I can't remember where that was exactly. I think I did solve it, but I'm not entirely sure how anymore. I can think of two things:
Give the element "layout". I tend to do that with zoom: 1.
Add vertical-align: top to either the a or li element.
Could you give a more complete code example? I can't reproduce it with just that CSS.
Did you specify the height for that div explicitly? If not, setting the height might make this go away.
Are the tags located in a place where you could give them background color all of the time? If so, does setting their background color when :hover is not activated still cause their height to change?
As a note, I can't reproduce this given HTML matching the rule you described, so the problem may be coming from somewhere else higher on the page.
<!-- This does not display the described behavior -->
<div class="options">
<ul class="tags">
<li>c++</li>
<li>not-programming-related</li>
<li>cheese</li>
<li>barnacle</li>
</ul>
</div>
The best thing I can suggest is to do what mercator said and give the element layout.
EDIT: Just a shot in the dark, but you may want to try setting a value for line-height on div.options.
EDIT 2: After seeing your screenshots I recall that I have had this problem at work before, and the fix in my case was to add position:relative; zoom:1; to the container (or maybe the links, I forget!). Try that?
EDIT 3: After googling for some solutions, you may want to try setting the height if your container explicitly. If this doesn't work, I have no idea what to do!
I have this exact problem as well. The trigger is definitely the background color on hover, but the usual solutions of giving the parent hasLayout don't work, I think because of nesting the A tags inside other tags. From what I ended up doing, your solution of nesting the clear fix is the right logic: separating the offending element, parent and clearing objects.
The solution I did was the following:
<div class="options">
<!--content here-->
<!--[if lte IE 6]><div class="ie6clear"></div><![endif]-->
</div>
With the following CSS:
.ie6clear{ clear:both; height:0; overflow:hidden; }
This way the clearfix CSS is only applied for IE6, highlights what the extraneous markup is, and makes it easy to remove when IE6 is no longer supported.