I am fairly proficient in CSS but now I am running into a very strange rendering issue in Google Chrome 9. I am trying to create some fancy looking link buttons (basically heavily styled anchors). Here is some example markup:
<a href="" class="button">
<figure class="sprite icon icon_back"></figure>
Link button with icon</a>
This markup may look a litte strange to you, there's a few things you should know:
I am using HTML5's figure class to include an icon as part of the button. I have the proper reset CSS applied and Chrome can render this tag for sure.
Instead of actually pointing to an image I am applying CSS classes to the figure element. Within the CSS I am using the spriting technique to show the correct portion of a single large sprite image.
All of this is working fine in Firefox, and actually also in Chrome. The correct rendering can be seen in the following image:
It renders like that in both Firefox and Chrome. Here comes the problem, if I place such a button within paragraph tags > <p></p> this is what happens in Chrome only:
Notice how the button is ripped apart? Only in Chrome and only when placed inside a paragraph. It gets even stranger: this only happens for the first button inside the paragraph, if I would place three buttons inside a paragraph, only the 1st one is screwed up.
Your first question would probably be about the CSS. It is rather verbose so hereby a temporary link to the page in question:
Edit: link to live page removed, was only temporary for problem inspection.
I believe that Chrome is automatically closing your <p> tag, because of the way chrome interprets the <figure> tag. If you look at the definition of the figure tag, you'll see it's supposed to be outside the flow of the content, and thus should not be contained within a paragraph. Try using a different item than figure, and I bet it will work.
You can read more about flow content here
As of Chrome 10, your site may be even more messed up.
In Chrome 9 (and Firefox 3.6 and Opera 11), <figure> has no margin.
In Chrome 10, it has margin:1em 40px;
In Firefox 4 RC1, the margin looks similar, but I'm not sure if it's the same - Firebug Lite doesn't list the margin.
Related
I don't even know where to start.
On one page of my project, when you enter the page for the first time, some parts of the site disappear and some don't get styled (e.g. border-radius doesn't work).
First off, some parts of the header shows up again when you hover over links, or select some text (that is actually invisible before selecting). Everything looks as it should when you refresh the page.
Before I found out that hovering or selecting fixes some parts, I thought that styles don't get applied or something like that. I've even tried to remove all the #imports and check if that works.
This happens only in Safari, styles get applied to proper elements but those are not rendered properly and are not visible.
I don't even know which parts of my code should I post here since it's just basic CSS and it works perfectly everywhere except Safari.
Any ideas?
#edit:
Here's an example of an issue (link your profile is shown, cause I hovered over it)
And when you select some parts of the invisible text and than deselect, it shows up:
This is Bootstrap based site, and here's the code for this alert:
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>You are not connected to Stripe yet.</strong>
<p>Other people will not be able to find or participate in your experiences until you connect to Stripe. Go to your profile to connect to Stripe now.</p>
</div>
Regarding the styles, it's basically just some padding and, obviously orange gradient. On the screenshot, you can see the border radius but sometimes it's not there.
An advice by a friend of mine: put empty style tag in your document worked! Just placed line <style></style> in the header and everything works.
Check out safari developer tools : https://developer.apple.com/technologies/safari/developer-tools.html
Posting screenshots of individual problems along with html snippets would help us narrow down the issues.
I am having a problem with the visibility of my LIKE BUTTON social plugin.
the problem only occurs on IE (it works just fine in Chrome & Firefox), and only to the type of "box_count".
I tried multiple ways to implement the plugin (iframe, fb:like etc...) and the result in IE is the same (as the picture demonstrates in the following link):
print screen of the messed-up FB LIKE-BUTTON
The problem is ONLY while i'm toggling a div (in a "talkbacks" area), while to plugin is inside a DIV with "Display:NONE" (before the display changes to "display:block" by clicking on another link).
I think the property "display:none" effects the plugin on IE somehow, altough the display changes after toggling the div.
You can't have a div with an ID that starts with a number - it's invalid.
Try and use the HTML version:
<div class="fb-like" data-href="http://www.example.com" data-send="true" data-layout="box_count" data-width="70" data-show-faces="true" data-font="arial"></div>
Make sure you don't have any CSS styles that alter the width of the DIV - as Anagio said - use the developer tools on chrome/firefox to inspect the div element that has shrunk. Also look for any javascript errors.
If you can post the actual URL, people will be able to offer more help
These are IE7 Only problems:
Navigation Problem
The active tab "jumps" whenever a user hovers on an inactive tab.
Screenshot:
http://dl.dropbox.com/u/6688069/navi.jpg
Search Filter Problem
I can't seem to get the height correct in IE7 without breaking the functionality.
Screenshot of what is should look like:
http://dl.dropbox.com/u/6688069/filter.jpg
Thanks!
What I'm seeing is that in IE7 this element:
<ul class="multiselect" id="multi-filtercountry"/>
is causing it those list items to expand... I also noticed that in Chrome, a real browser, none of those sidebar elements are expanding their parent. That means to me that you have one floating element in there somewhere, and the others aren't.
If you use Chrome's developer tools and mouse over the elements inside <span class="expanded"> you'll see that their position is determined to be up top, meaning they aren't flowing properly.
My best advice is to try to look at this not as an IE7 problem but a markup problem in general.
You can see my issue here:
http://pmind.com/staging/123.html
I've tested this in Chrome, Safari, Firefox and Opera so I know it's not just an Internet Explorer wonky bug.
In the top right of the content, there are two text links, that are being hidden under the graphic. The <div> that contains the text links comes further down in the page, and my understanding was that that alone would make the z-index of the links such that they would be on top. But because that didn't do it, I set the z-index of the <div> containing the text links manually, which still didn't fix the problem.
One partial solution I found was to set the z-index of everything on the page but the <div> to -1. This however broke the roll-over functionality of the navigation items. I hate to ask something like this, and then it be some extremely simple issue I've just overlooked, but I'm at my wit's end.
Adding "position: relative;" to #top_links brings them to the front in Firefox. I haven't tested this in other browsers.
i have a blog and i have placed a form in right but it shows different result in different browser.
The Link named "Subcribe in a reader" should be in center but it shows in left in Safari and Opera but IN FF and Ie7 Shows Perfectly in center.
And The border is 5-6 pixel going up in Opera and Safari but in FF & IE 7 it shows Perfectly fine. And In Ie6 it shows border line 10-12 pixel downside ... strange
i m using this code to adjust for postioning..
please help....
my blog : ww.techieinspire.blogspot.com
check image here
http://techie2inspire.googlepages.com/csspositioningproblem.JPG
Your markup is seriously jacked up. Use Firebug on Firefox to look at it. Here's a couple things I noticed:
You have your elements for your subscribe link inside the form above it. This is not apart of your newsletter form, so shouldn't be contained inside that form.
Your using a lot of <span>s with block elements inside them. <span>s are generally for inline content and sticking block elements (like <p>) inside could give weird results.
Check your stylesheets where your setting the left padding for ".newsletter p" this is affecting your subscription link.
Try to avoid specifying styles inline (using the style attribute).
Stop using postion:relative everywhere. Instead using padding and margins for layout your sidebar.
Generally to center something, you can do this:
.centered_thing {
margin: 0 auto;
text-align: center;
}
Edit: The marquee thing is terrible. Read about what happened to the HTML marquee tag. There's many good reasons to avoid it or Javascript knockoffs.