css

What are the reasons to use the id attribute for CSS purposes?

I've always used the class attribute, never id for the purpose of CSS selecting and styling. I know that the id must be unique, but that doesn't seem to be a reason to use it for CSS. The only reason I have used the id attribute is for JavaScript and form labelling. I find mixing id and class for the purpose of CSS can cause confusion,...

CSS Set maximum distance from browser edge.

I've got my site content inside an 800px-wide div, I'd like that div to be centered on the page until the browser window width extends past certain distance. At that point, I'd like the content to "lock" into place and not continue to center itself, staying a fixed amount from the left edge. For example, if the viewers window is 900px w...

ASP.NET Menu control causing table cell height issue

Hi I'm using a two cell table for my navigation layout (which I should probably be using css). The left is cell is a hyper link. The right cell contains an ASP.NET menu control. When the page renders in IE7, both the hyper link and menu on the same line. When using FF2, FF3 or IE8 the menu is causing its cell to increase in size. ...

What is the best approach to make 3 column fixed width cross browser compatible, accessible, semantically correct layout ?

What is the best approach to make 3 column fixed width cross browser compatible, accessible, semantically correct layout ? <div id="wrapper"> <div id="header"> This is the Header </div> <div id="top-nav"> Top Navigation </div> <div id="leftcolumn"> Left Column ...

What kinds of css hack for IE do you know?

I know these so far: *width:to hack all IE _width:to hack IE6 only Can you guys continue? ...

How to make max-height work properly in IE6,IE7?

max-height:600px; The above works as height:600px in IE7,and not working at all in IE6. ...

JavaScript: Calculating a value from a CSS property in a <DIV> to another <DIV>

I'm a noob so this is probably basic stuff, but I have tried to solve this by searching the web without any luck. Any help is much appreciated! What I need to do is: To move a floating down X px after the page has been rendered, where X is the height of another . I have tested the CSS manually, adding X px to the "Top:" property and it...

How to have an image top left and bottom right.

Can someone please tell me what I am doing wrong here? What I have are quote images. I want to wrap the text in between these quotes. The open quote is fine and displays correctly. The image is top left and the text wraps around and below it. The closing quote however will not render properly. It goes below the paragraph tag. Thanks ...

Centering a Page issue

Ok, lets see if i can explain this. My page content has a width of 960px. It is centered in another div that has a width of 1426px (#siteWrap). #siteWrap{ margin:0px auto; width:1426px; background: url(../images/bg.jpg) no-repeat ; } What i need to find out is how to get #siteWrap to center on a page regardless of screen resolutions. ...

CSS: Center a float:left element based on screen width?

I have to use a float div (the main window of my application), and I'd like to center that floated DIV based on the client's screen width. How can I accomplish that? Right now I'm using a left:20% but that's not always centered depending on the user's screen resolution ...

Why "display: table-cell" is broken when "position: absolute"

Hi All, I ran into a strange problem. I use DIV as a container, and put an image into this DIV. I want this image to be aligned vertically to bottom. The following code works. #banner { width: 700px; height: 90px; top: 60px; left: 178px; overflow: hidden; text-align: center; display: table-cell; vertical-align: ...

how to keep element from scrolling into view ?

I'm using jstree plugin altogether with filament group buttons on the web page. I would like filament group buttons to scroll out of view (stay where they are) when user scroll down but instead buttons staying in view. And that happens only on IE. Here is how it looks when there is no scrolling: Now when user starts to scroll... Ca...

How do you stretch a Background Image

I have a gradient background that I'm using like follows in an ASP.Net Webforms application: <div style="background-image: url(foo.jpg) repeat-x;"> ... Injected HTML codes </div> Where foo.jpg is a 200x1 pixel image. My problem is this, the height of the injected HTML varys from about 200px to 1000+px depending on size of a data...

Extend background beyond div element.

Is it possible to extend a background element in a div outside of the div frame? And a follow-up question pertaining to a workaround I've found: I've put an <img> in my HTML code positioned behind my main content. That displays the whole background image correctly, but there are scroll bars extending the full length of the image and th...

Controlling tab space in a <pre> using CSS?

Is it possible to specify how many pixels, etc. the tab space occupies in a <pre> using CSS? for example, say i have a piece of code appearing in a <pre> on a web page: function Image() { this.Write = function() { document.write(this.ToString()); return this; }; ... } Image.prototype = new Properties(); ... ...

How to compose HTML that acts like the iPhone UI?

I've seen a lot of html that behaves like an iPhone UI. Is there a library for this? Any tutorial/guides in building these html? See screenshot for an example. ...

CSS grouping and subgrouping

Is it possible to apply style to all class X only if it's of class A, B or C without code duplication? I understand grouping: A, B, C { ... } But I want something like: X, (A, B, C) { ... } How can I achieve this without duplicating code? ...

How do you default an image's right edge in a CSS Overflow DIV?

I have the following on a page: <div style="max-width: 600px; overflow-x: scroll;"> <a href="PoolPanoramaBig.jpg" target="_blank"> <img src="PoolPanoramaBig.jpg" style=""/> </a> </div> If the image is wider than 600px then you can scroll the image to the left to see the rightmost part. However, I want to default it so that it ...

Need CSS sidebar height to expand with content.

I have a two column layout, with a gray sidebar on the right. I need the sidebar's height to expand when the height of the left column is increased (due to content being dynamically expanded). I can make the sidebar fit a static page, but I cannot get it to increase in size with the rest of the page. Did some Googling, but couldn't find ...

IE8 CSS/combobox bug (weird appearing text)

I am trying to identify this bug. Is this a known issue already or is it totaly new? Is there a workaround (like a zoom:1 or position:relative that I can add to fix it?), idealy without modifying the html here but just adding to it. If you display the below html in IE8 you will see the text from the select (combo box), is displayed tw...