css

Generic vs. specific element styles - for maintainability

Consider the following three scenarios... Scenario A @import "reset.css"; /* ... */ p {margin:1em 0;} /* ... */ p#copyright {margin:0; padding:10px;} In Scenario A, a generic rule is applied to all <p> elements that gives it top and bottom margins, so that the paragraphs are properly spaced when used in the HTML. But, by doing so, th...

Div with "display: none" style appears anyway

I have a div with the id "hubspot-contact-form". This div has a display style of none. But when the page loads, the div appears anyway. Can anyone help me figure out how to hide this form when the page loads? Here is the whole page. Thanks. <?php include ('includes/secure.php'); include ('includes/globals.php'); $thisPage =...

Jquery dynamic image resizing not taking correct image dimentions

For some reason while clicking around this gallery i'm creating, the dimensions that get assigned to the CSS don't always take when a new image gets loaded in the .product-image container. I think it's caused by assigning css attributes while an image is still loading, as it only seems to happen with larger images. Once ".more-views a" ...

side-by-side divs with form that should not break

I want to have several divs with content side-by-side like D1 D2 D3 D4 D5 D2 contains a form. Without the form it's working (using display:inline and such). There should be no line breaks in the resulting HTML as this is a page header. How can I accomplish that? UPDATE here's the actual code <div id="sep"> <img alt="separator" src...

css select all descendants (asterisk) of elements with a class

I want to select all descendant elements of the element with class="x" this way: <!DOCTYPE html> <html> <head> <style type="text/css"> .x * { color: red; } </style> </head> <body> a <p> b <p class="x"> c <p> should be red </p> foo </p> </p> </body> </html> which unfortunately does ...

IE jQuery Opacity Anti-Aliasing Issue

I am using jQuery to fade in and out a .png images of links on the home page of http://www.logandwight.com In IE7 and IE8 the text have no anti-aliasing and are all boxy. I've tried messing with the opacity settings and then I tried animating the filter property specifically for IE but nothing seems to work. Does anyone know whats wron...

Typeface.js not rendering headers at all in Internet Explorer

Hi, just wodering if anyone has experience with Typeface.js ( http://typeface.neocracy.org ) and fixing issues of the font not being rendered in Internet Explorer ( 6, 7 and 8 ). The font renders in Firefox and Safari fine, hover nothing is displayed in the Explorers. The font is not installed locally so I know that the script is workin...

What is -moz-use-text-color?

I understand it's deprecated in FireFox, and its replacement is currentColor. My impression is that it's used for SVG-related stuff. But what the heck is it? :) ...

align headings to same baseline, regardless following text?

Hi, is there a way to align first line of multiple headings of various size to the same baseline? Also regardless to the text that follows, which should be aligned as well. See picture at http://snapplr.com/snap/z1mw please EDIT: re-uploaded: It seems to me the only solution is to put each heading and each body text into separate ...

Why does this odd CSS confuse the DOM parsers of IE 7 and Opera 10?

This is a weird CSS issue I was experiencing while trying to fix a footer that rendered properly in IE 6 but failed to render properly in IE 7. Here's what the issue was. There is this css class, clearer, shown below: .clearer { clear: left; line-height: 0; height: 0; } In the JSP/HTML output, there were either: <div ...

Setting width of table cell contents based on available width

I have an HTML table whose cells contain, among other things, spans, like this: ... <td> <span style="height: 20px; width: 20px; margin-left: 2px;"> <span style="height: 20px; width: 20px; margin-left: 2px;"> <span style="height: 20px; width: 20px; margin-left: 2px;"> </td> ... I'm looking for a way to shrink the width of ...

Are there good classes for web GUI architecture?

I'm a GUI developer in a big company that thinks "developer" == "java". Through sheer force of willpower and talent, I've convinced them that thinking about the GUI as a structured aspect of the site rather than an "eh we'll take care of that later" value-add is important. So I want to take some courses to move my career upward on this ...

My Dropdown menu works right on every browser but IE 7. Why?

I'm making some basic drop down menus based on this tutorial So its all dandy except for IE7. It appears when you hover on it but when you move the mouse from the main element to the ones below it it hides again. /* General */ #cssdropdown { position:absolute; right:0px; top:0px; font-size:medium; font-weight:bold; } #cssdropdown, #cssd...

Absolutely positioned div on right causing scrollbar when the left doesn't

I'm trying to "flank" a centered div with some design elements that are absolutely positioned outside the main div's width. I'm getting a scroll bar due to the element on the right, but not the element on the left (IE6/7/8, Chrome, Firefox). How can I get rid of that horizontal scrollbar? <html> <head> <style type="text/css"> html, ...

How do I get alt text to support vertical-align: middle?

In the following test case, the alt text is horizontally centered, but it's stuck to the top of the box. How do I get it in the middle? <html> <body> <div style="height: 300px; width: 300px; border: solid black 1px;"> <img src="asdfasdf" alt="foo" style="display: block; text-align: center; vertical-align: middle"/> </div...

Change style of all elements of a class via prototype javascript

This is probably really simple, but the prototype docs on the $$(function) really suck. What do I DO with all the items once the function gives them to me? First I tried: $$('div.category').style.height = 400 +"px"; Then: $$('div.category').each(.style.height = 400 +"px"); Finally: for (x in $$('div.category')) { x.style.heig...

Expanding DIV to Width of Container on Page Overflow

I am trying to create a simple box with some content and a colored header. Here is a bare-bones example of what I am talking about: http://guardingdark.com/css-20100217.html I will paste the code below too. The issue is when the the content DIV pushes the width of the block outside of the width of the page. The block DIV expands with t...

Firefox 3 only CSS Hack

Looking for a Firefox 3 CSS hack that doesn't inherit in Firefox 3.6. html>/**/body .blockmeta .date-ui, x:-moz-any-link, x:default { border:1px solid #ccc; border-bottom:2px solid #ccc; background:#f2f2f2; margin-top:-1px; } The code above seems to also work in Firefox 3.6 which is undesirable. ...

Problem with CSS postion: relative with position: absolute children

Usually this sort of thing I can do, but today it is bugging me. See this page at JSbin. Essentially what I'm doing is have a list of unordered items they all have a link jQuery loops through and makes an extra link inside the list item, which is expanded to the whole list item using CSS this gives users a larger place to click For...

Clip borders/ rounded corner of webpage like twitter?

I want to build a webpage like twitter or microsoft hohm. Like clipping borders, buttons, clipped text box. How can I do this in Dreamweaver? Is these things are done by photoshop? Any tutorial or links will be very helpful. If there are any webdesign template of twitter of something like twitter please let me know. ...