css

Overlay Text On ImageButton

Does anyone know of an easy way to display text over top of an image? One solution I've found is to just do the following: <img id='img1' src='myimage.jpg'> <div style='position:relative; top:-30px'> MY TEXT TO DISPLAY ON IMAGE</div> This will cause the Div and all of its contents to move up 30 pixels. The problem is that I do not kno...

Dynamically changing height of div element based on content

I'm working on a Facebook-like toolbar for my website. There's a part of the toolbar where a user can click to see which favorite members of theirs are online. I'm trying to figure out how to get the div element that pops up to grow based on the content that the AJAX call puts in there. For example, when the user clicks "Favorites Onl...

Centering several elements inside a div

Greetings, I'm trying to create a pagination panel for one of my lists and want to make it centered. Currently it looks like: <div class="panel"> <div class="page">1</div> <div class="page">2</div> <div class="page">3</div> </div> So I'm basically trying to make all of the "page" div elements go to the center of "panel" containe...

CSS method to include IE6 hacks

CSS has @import, right? IE6 understands *html selector hack, right? Is it possible to combine them like //*html @import url(ie6hacks.css); or, possibly, //*html { @import url(ie6hacks.css); } ? Good browsers must skip this, will it still work in IE6? How does it look as a solution? I can clearly see it looks ugly as normal CSS....

margin and padding are causing issues calculating layout

I am having this issue where I am not getting the true offset in IE6. I am using the offset to position a pop-in. The CSS is something like this: .container50-50-right-border { } .container50-50-right-border .title {padding: 0px; margin: 0px; clear: both;} .container50-50-ri...

Avoid an Element from being cut off when they are inside a "overflow: hidden" element

I'm using the equal heights CSS trick as outlined on this page. It was all working fine until today when I need to add a dialogue box inside one of the columns, which is absolutely positioned to take it out of the flow. The problem is that since the container has "overflow: hidden" on it, the dialogue is being cut off when it overflows....

Making a CSS footer either sit at the bottom of the browser window or bottom of content

Duplicate of this question. I've got an existing site (jacquelinewhite.co.uk), on it there is a footer. Currently this footer always sits underneath the main content. I'm trying to make it float to the bottom of the browser window, or if the content is bigger than the window, stay at the bottom of the content. Effectively the HTML is s...

Flex Wrapper Layout tips?

Are there any best practices when it comes to styling Flex applications ? I would like to give the html page designer as much flexibility as possible. Any tips, pointers? ...

Auto ajax selectors with Jquery

Hi, I'm trying to make a proof of concept website, but I want perfect degradation. As such I'm going to code the website in plain XHTML first and then add classes & ids to hook them in jQuery. One thing I want to do is eventually enable Ajax xmlhttprequest for all my links, so they display in a viewport div. I want this viewport to be a...

Limit text to the width of sibling image / auto width in CSS

I am essentially trying to create a version of the "figure" element (upcoming in HTML5), whereby I have an image with a short description below it. However, I want to limit the width of this entire element to that of the image, so the text isn't wider than the image (wrapping to multiple lines if necessary). Basic HTML: <div class="fi...

Speed/redundancy of selectors in CSS

Does anyone have information on browser selector speeds in CSS? In other words, how different selectors compare to each other (in th same browser). For example, I often see (and write) code like this: #content #elem { ...rules... } But since those elements are unique IDs, I should only need #elem, right? This got me thinking about wh...

How do you easily horizontally center a <div> using CSS?

I'm trying to horizontally center a <div> block element on a page and have it set to a minimum width. What is the simplest way to do this? I want the <div> element to be inline with rest of my page. I'll try to draw an example: page text page text page text page text page text page text page text page text ------- ...

Table layout equivalent using DIVs

Hi, I was working on creating a layout today which goes as follows: +----+ +----+ +----+ +----+ | | | | | | | | +----+ +----+ +----+ +----+ Looks simple, but I have some additional specs: The max number of columns (n) needs to be dynamic (This HTML page is generated at run-time). The entire set must be horizontally flu...

IE7 Defaults Elements to 100% Width

I've got a really frustrating problem with a web application I work on (I didn't originally write it). It uses frames for the layout scarily enough. The problem I'm having is that all elements with a background colour and border set via CSS default to 100% width. I've just tested div elements, paragraph elements etc. I removed the s...

asp.net ajax calendar extender (in updatepanel) causes wrapping

Here's a simplified version of my page: <asp:UpdatePanel runat="server" ID="dateUpdatePanel" RenderMode="Inline"> <ContentTemplate> <asp:Label runat="server" ID="lblDateFrom" Text="From:" /> <asp:TextBox runat="server" ID="txtDateFrom" /> <asp:ImageButton runat="server" ID="cmdDateFrom" ImageUrl="~/images/calendar.jpeg" />...

CSS width of a <span> tag

i use tag in my module titles. e.g. <span>Categories</span>. I specify the span's background color/image, width and height in css. But the span's width depends on it's content/text. So, if i do <span></span> , with just a background image/color in css, nothing appears. Of course, I want something to appear. How can i resolve this...

Is this the way to do absolute/relative/static CSS DIVs?

I want a centered header DIV and inside it the following absolutely positioned DIVs: logo menu line title But my HTML/CSS has two problems: for some reason the page is now wider (see bottom scroll bar) If my title is longer, I want it to be right-aligned of course What I really want is a centered DIV and inside that I want to pos...

How can I change the css class rules using jQuery?

Can any one help me please, I have two sections of my question. What I want to do is changing css class rules using jQuery on the fly. .classname{color:red; font-size:14px;} In example above I have a class named .classname now using jQuery I want to change the font size only not color with in .classname not by adding css inline. I w...

How do I stop richfaces adding borders to panels and calendars?

I'm hoping to use a custom richfaces skin to handle the bulk of my presentation work. Unfortunately richfaces renders borders around every cell in a calendar component and around each panel. I would like to turn them off so that day numbers site in an open grid with no borders. There is no obvious way to do that using skins or attributes...

Style HTML element based on its title using CSS

Hello, Is it possible to apply a style to an HTML element using only its title as a unique identifier? For example: <div class="my_class"> <a href="some site" title="MyTitle">My Link</a> </div> I would like to write a rule that will apply only to link element within a div of class my_class and the link title MyTitle. I do not h...