css

Hover Over a Menu Item Working in Firefox but not in Internet Explorer

Here is the coding in which hover is working inf firefox but not in IE .menu { margin-top:1px; display:inline-block; background-color:#FCFAB4; color:#000000; height:30px; width:121px; padding-top:10px; font-size:13px; font-weight:bold; font-family:Geneva, Arial, Helvetica, sans-serif; text-align:center; } .menu:hover { b...

hide show div when multiple nested layers exist

function showlayer(layer){ var myLayer = document.getElementById(layer).style.display; if(myLayer=="none"){ document.getElementById(layer).style.display="block"; } else { document.getElementById(layer).style.display="none"; } } I need this code to close the current layer and them open another. These layers exist in the content div and...

Will search engines penalise text hidden by javascript?

I have this html code and want to use the text in the divs who are children to "divHiddenTexts" for a javascript slider and I want search engines be able to find the text. What I don't want is a penalty for hiding the text with CSS which is discussed in this question SEO : Is h1 tag that’s hidden using display:none given prominence by Se...

How can I merge CSS definitions in files into inline style attributes, using Perl?

Many email clients don't like linked CSS stylesheets, or even the embedded <style> tag, but rather want the CSS to appear inline as style attributes on all your markup. BAD: <link rel=stylesheet type="text/css" href="/style.css"> BAD: <style type="text/css">...</style> WORKS: <h1 style="margin: 0">...</h1> However this inline style a...

Changing Body Font-Size based on Font-Family with jQuery

Hi there, I'm trying to use Myriad Pro as my primary font with Arial and such as a fall-back like so: font: 13px "Myriad Pro", "Helvetica", "Arial", "sans-serif"; I want to change the font-size when Arial or Helvetica are selected. This is what I have in jQuery but it does not work: $(function(){ if ($("body").css("font") == "Aria...

CSS box/ul menu problem

Hello, I am having serious trouble getting my css to work properly. It looks different in all 3 browsers that i use (Chrome, IE and FF). Now to the question in hand, i have been trying to copy the example from the following url: h t t p : / / w w w .alistapart.com/articles/taminglists/ Just scroll down almost to the bottom and look for ...

Help with DIV layout and CSS height

Hi, Please see the screenshot. I am trying to produce a layout that allows me to apply shadow to either side of the main div using the divs left (headerLeft) and right(headerRight), I then have the content div(header) that holds the header content. This is all wrapped in a div (headerWrapper). I am using 4 divs to do this. I have it wo...

How to prevent the floating layout wrapping when firefox zoom is reduced

Given the following HTML. It display two columns: #left, #right. Both are fixed width and have 1px borders. Width and borders equal the size of upper container: #wrap. When I zoom out Firefox 3.5.2 by pressing Ctrl+- columns get wrapped (demo). How to prevent this? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w...

Dynamically resizing the height of div based upon the size/resolution of user's monitor

I have a three row, one column site design and I'd like to have the center content div resize to fit the remainder of the column (height of screen - (hardcoded footerheight + hardcoded header height)). Is there a cute way to do this with CSS? If not, how can I accomplish this with javascript? Thanks, Tom #container { background-colo...

Vertically Aligning Input Elements

I'm having a bit of trouble with the following code. I have an absolutely positioned div, inside of which I have 3 elements: 1 text input, 1 password and a button containing an image. The markup is as follows: <div id="credentials"> <input type="text" id="username" /> <input type="password" id="password" /> <button ty...

Images appear stretched in IE

Basically, I use jQuery to get images from Flickr like so: $(document).ready(function(){ $.getJSON("URL-GOES-HERE", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).addClass("thumb").appendTo(".flickr") .wrap("<a href='" + item.link + "'></a>").wrap("<div class='flickr-thumb' />"); ...

Changing the colour of a dropdown list when closed

With CSS I can set font and background colours for the individual options of a dropdown "select" list; however, these colours only show up in the actual dropdown. The colours shown in the box on the page when the list is not open are still the defaults. Currently I have a list with many dropdown boxes having a few options, and it would ...

How to calculate/predict width after a browsers zoom?

Specifically, how do I predict/calculate the effect any of the browsers' zoom will have, for example, on width:950px? Are there any tools I can use to determine the new widths? edit: If I have a 950px div that is visually rendered 875px in, say, chrome, I could say chrome reduces fixed widths by approx. 92.1% after one crtl-. (950*.921...

CSS padding on input element breaks ie6 ie7

After a bunch of googling and searching, I can't seem to find any info on this. The problem: In ie6 and ie7, the text entered into a styled input is displayed "cut in half", with some of the text clipped off in the middle and the remainder hidden underneath the bottom of the input. Picture the word FOOBAR inside the input. You would o...

CSS absolute position alignment

Hi, I have a login form on my website that displays when a user clicks a button. It is a div that floats over other content. It only takes up a small portion of the page (directly below the sign in link). It all works fine apart from one small thing. It displays aligned to the left of the sign in link (i attempted a diagram below). ...

Accessing CSS classes in a css file, cross-domain, in javascript

We include the CSS file via standard HTML STYLE tag. Then we need the javascript code to access the CSS classes and attributes. in IE and Chrome all goes fine, but in Firefox it throws this exception: uncaught exception: Security error (NS ERROR DOM SECURITY ERR) here's the javascript code: for (var i = 0; i != window.document.styleS...

vertical Menu functunality with jQuery

I have a menu (vertical menu) and i want each of the Ul's to show when hovering the dd's, and hide back in when mouseOut (second function of .hover()) what will be the best easiest way (without a plugin). <dl class="lft-menubar"> <dt>Computers</dt> <dd> <ul class="slidedMenu"> <li>3rd level menu</li> <li>3rd ...

Are fully qualified CSS styles efficient?

In creating CSS styles one approach seems to be a fully qualified style such as #pnlImage div.ipd-imageInfo div.ipd-tags span.ipd-tag compared to a shorter definition such as div.ipd-tags span.ipd-tag which would uniquely identify the style as well. However, if the site is expanded or changed the 2nd style runs the risk of not uniq...

CSS Float border overlap issues

I'm trying to float a menu to the left of the page, and when it gets large enough to reach the content below, Firefox bumps the content over exactly as it should... except for the border. Here is a screenshot with a few items: And another with several items "Box 4" gets moved over as expected, but its border stays at the left. O.o...

Is there a CSS selector to select text (inline blocks) within a rectangular box?

Can a CSS rule select the portion of a box which contains text (or an inline block)? For example, an HTML fragment like <p>The quick brown fox jumped over the lazy dog</p> might be laid out like this: +--------------------------+ | The quick brown fox | | jumped over the | | lazy dog | +-------------------...