I'm trying to get the Thesis theme working in Wordpress, and it's almost perfect. For the navigation menu I want to use images instead of text. My solution to this was to set a background image via css:
ul.menu .tab-2 a {background:url(images/myimage.jpg) no-repeat;background-color:transparent;width:81px;height:60px;margin:0px;padding:6px;border-style:none;}
This works fine everywhere but IE. You only see the image and not the text that Thesis is writing out for that nav item:
<li class="tab tab-2">About Us<!--[if gte IE 7]><!--><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
In IE, however, the href text does show up over the background image. I suppose this is what I expected to happen, so I was pleasantly surprised to see it not working like that in every other browser.
What I'm trying to figure out is if there is a way to get the background image to show up on top of the href text, effectively blotting it out. I have tried hacking Thesis to suppress writing out the text, which works in all the menu items except one, and that is because I am writing out categories, not pages.
I really want to use Thesis' nav menu and not roll my own because I'm sure then I would have more troubles getting the drop downs to look nice in all browsers, and my css is just not that advanced. And I don't think there is a way to tell Thesis to use an image instead of text for the nav menu item.
I have been staring at this for hours and clearly am not thinking clearly about it anymore.
Try adding:
display:block;
text-indent:-5000em;
overflow:hidden;
... to your current rules.
Some folk prefer other ways to do image replacement, but this is the most common way IMO.
Related
I’m running into an interesting CSS issue on my portfolio site that I haven’t been unable to solve on my own. I’m using the and tags to transition from an image to a caption/button on desktop hover or mobile click. Unfortunately, it works on all browsers except for Safari iOS.
On my iPhone, I’ll click one of the images and it won't respond; but if I hold down on it, I'm then able to select the caption text which is seemingly there but not visible. I don’t experience this issue on any other mobile browsers that I've tried so far.
See the “Projects” section of this page from Safari iOS to attempt to duplicate the bug.
The specific lines of code regarding this issue can be found here (HTML) and here (CSS).
Note that I used the Bulma CSS framework to create the site, and have since tried several manual changes/additions to the CSS for this section in an attempt to resolve the issue. No luck yet. Any ideas?
The issue is the .overlay div inside of figure. Because it span the entire width and height of the parent, it's blocking clicks (taps) on mobile and preventing figcaption from being revealed.
One way to fix this without JavaScript (the dream) is to add tabindex="0" on the figure element.
<figure class="image is-3by2" tabindex="0">
Adding tabindex will allow the element to respond to :focus, removing the overlay when figure has been touched.
.image.is-3by2:focus .overlay {
display: none;
}
I am using same style, however, it rendered different in chrome. It shows lighter. Is there a way to fore chrome render the style same with other browsers ?
.text {
color:#333435;
font-size:13px;
font-family:arial;
}
<div class="text">Test text</div>
Check out this link for more information.
Colours aren't numbers. Each browser will use numbers to represent the colour but it will each display the colour slightly differently.
First off, I feel your pain. I come from print and it can be infuriating that you can't get everything perfect.
But, alas, you can't get everything perfect. If you want to know why here's a little article for you: font rendering
Each browser will handle fonts a little differently and you kind of have to get right with it. When you have title or logo that needs to be exact consider converting it to an SVG.
I've picked out a color that I want to use throughout my website - it's the color of the logo and of the header, among other things. In my case, it's #7ed321. I've created the logo and exported it as a PNG with the color profile stripped.
Problem is, the page looks completely different in Firefox, Safari, and Chrome - each are rendering the colors their own way.
Chrome, Safari, and Firefox, from top to bottom. That's the logo and a piece of the header below. They might look the same on your screen, but they sure don't on mine.
Chrome - renders both header and logo as native #7ed321 (sRGB #94C9D6).
Safari - renders both header and logo as native #54df16 (sRGB #7ed321), a much brighter green.
Firefox - renders logo as native #54df16 (sRGB #7ED321) and header as native #7ed321 (sRGB #94C9D6). So the colors don't even match.
Basically, Chrome realizes if I asked for #7ed321 in my PNG and my CSS, that I always want to see #7ed321 on my screen, so it does the necessary conversion to sRGB to match my monitor's color profile.
Safari assumes I provided both values in sRGB, so it does no conversion to my target monitor.
Firefox does no conversion for my logo but does convert my CSS-provided #7ed321 to sRGB #94c9d6.
As a result, the same page is looking inconsistent among browsers. The difference isn't significant, but I'd like to get them looking closer if I can. Is there anything I can do to my CSS/PNG to make the page look the same?
There is a way to ensure the logo and any other occurrences of the brand color in the code are the same. That is to use CSS to color any instance of the green.
Export the logo as just the white leaf with a transparent background. Then you can form the logo using CSS to create the circle and fill in the background color. For example:
HTML
<div class="logo"></div>
CSS
.logo {
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
background: #7ed321 url(../img/logo.png) center no-repeat;
}
Now the code has applied the green color, so it will match any other green you apply with CSS such as the header.
As for making all browsers and screens look the same - that's a bit of a losing battle. Users all use different screens and the color will be rendered differently. It would quite honestly be pointless spending any time trying to do anything about that.
An alternative to using CSS to build the logo like this would be to show the logo as a font. You can do that will a tool like Fontastic which allows you to then do resizing and cool CSS transitions on the logo if you wanted: http://fontastic.me/
If you have a vector version of the image you could use the svg format. With svg you can access the color hex codes for stokes and fills directly from the markup. But the problem probably has something to do with that some browsers can make use of your operating systems colour profile and others can't.
It's an ancient and crappy solution, but sometimes the best way to make sure that at least the two elements match is to color the box created with css with a 1 pixel png that you export with all the same color settings as the logo.
For some reason the menu of my site is appearing all mis-aligned when using Safari.. site is at http://penarthpc.com/~redvaner/
I've been staring at it for hours and I cant figure it out. It's driving me crazy. Below is an image of how it looks when displayed 'improperly'
http://i.imgur.com/t3hXjry.png
Below is the CSS I've written for the Navbar (element has issues)
(http)pastebin.com/kLDBGnsU
Your help is much appreciated! I'm at a wits end :(
the only difference I can notice on first look is that your links are underlined in Safari. Everything else looks fine and not like the supplied image. The following CSS should solve the underline issue:
a{text-decoration:none !important;}
With regard to the supplied image, perhaps try adding the following to your <li> style
#nav-bar ul li{display:inline-block;zoom: 1;*display: inline;}
this is an ie7 fix, as inline block elements dont usually render correctly in ie7
One of my sites has a horizontal navigation bar which is created using a list. Besides a small bug in Firefox the list looks & works fine by now - except in Opera 11.61. There the list elements won't show up at all! As the list is the site's main navigation it is nested inside a nav element. So far my debugging showed that this is where the problem is.
When I remove any background information (like background-image or background-color) from the nav element the list is still invisible - I can see the body's background-color.
Also assigning different z-index values did nothing. But removing the nav element helps - when there is no nav the list shows up.
I created a small test case illustrating the problem (remember: Must be opened with Opera.): http://jsfiddle.net/sX5KF/
Do you have any clue why this problem occurs? Is there a fault in my code or is this just something like a bug in Opera? What can I do about it?
Alright I found the mistake. Opera displays nothing because I set content: ""; on the after-element. Other browsers seem to ignore it, but not Opera. I set it because I read it is needed, but actually it works even without content: "";.