I'm trying to align some text of different sizes vertically, however, Firefox displays the smaller text way above the middle. CSS: div.categoryLinks { margin: 1em 16px; padding: 0 4px; border-width: 1px 0; border-style: solid; border-color: #ece754; background: #f7f5b7; color: #a49f1c; text-align: center; font-size: 1.4em; } d...
How do I get the "x" to be vertically-aligned in the middle of the span? .foo { height: 50px; border: solid black 1px; display: inline-block; vertical-align: middle; } <span class="foo"> x </span> ...
I'm working on a project which injects JS+CSS+HTML over web pages which I do not have control over. I am concerned about the host page styling my injected code -- I want my injected code to only obey my styling, and not theirs. At the moment the only method to do this I can think of involves explicitly specifying every possible tag for...
With different browsers choosing to render CSS in their own preferred way , whats the point of having a standard? Simple stuff like creating a fluid 3 column layout that works across all browsers can be an experience in frustration. How do you deal with this or make cross-browser compatible development not so painful? ...
i have the following css code: .tag { display: inline; font-size: 10px; padding: 5px; color: #FFF; background-color: #444; } .tag:hover { font-size: 10px; padding: 5px; color: #FFF; background-color: #666; } aside from the background color, and one having the display:inline, there is no difference,...
Hi there. I wish to use the iBox plugin but I don't know how to: 1) disable image resize. 2) modify the opacity of the background. I was trying to modify the ibox.js file and I think that opacity starts from line 330. many thx! ...
Hi, I am using jQuery monthly calender, in which every day is a cell, onClick in the cell, I am able to print the alert, but I also want to change the background color of the cell, on which I clicked. But I am not getting the way to call CSS using javscript. Please help me out. Thanks, Ram ...
Say I have some state which the user can toggle, for example [ON] | [OFF] . Typically, I use ONE switch (BUTTON) and when the thing is ON, the user sees: LIGHT IS [ON] When it is OFF they see LIGHT IS [OFF] My question is: is it obvious (sensible) that one should click [ON] to turn the light [OFF]? How do you do it? Any thoughts ...
Hi all, I'm having a problem with non-displayed HTML elements being copied to the clipboard, and then displayed when the content is pasted into MS Word, Outlook, etc. For example: <p>Hello</p> <p style="display: none;">I'm Hidden</p> <p>World</p> If I view that HTML in a browser, copy the text to my clipboard, then paste into Outloo...
I need to stretch main div height to the view-port height and place the footer at the bottom of the screen. could anybody solve this? body{text-align:center;} #main{width:200px;margin:0px auto;background:#cccccc;} #header{height:20px;background:#00FFFF;} #content{height:80px;background:#cccccc;} #footer{background:#0000FF;height:20px;} ...
Is hiding a <br /> tag with CSS a well defined way to make line breaks conditional on the definition of the tag's CSS style? Is it portable across browsers? When I want it to show, is "inline" the best display type to use? Given the following CSS and HTML, <style type="text/css"> .maybe-hidden {display:inline} </style> abra<br class...
In my ASP.Net app, which is javascript and jQuery heavy, but also uses master pages and .Net Ajax pieces, I am consistently seeing on the status bar of IE 6 (and occasionally IE 7) the message "2 items remaining" or "15 items remaining" followed by "loading somegraphicsfile.png|gif ." This message never goes away and may or may not preve...
I have css like this: .done {list-style-image:url('images/tick.gif')} .notdone {list-style-image:url('images/cross.gif')} And html like this: <ul> <li class="done">Done</li> <li class="notdone">Not Done</li> </ul> Works great on IE6 and FF. Each li item has a different image for the bullet. But all of the docs I see on list-styl...
I'm making a ul-based horizontal navbar, but I want to have two levels heading in each item, a bit like this: Nav item1 Nav item2 Nav item3 Nav item1 subtitle Nav item2 subtitle Nav item3 subtitle The subtitle has to be in a different style to the main nav item. I did this first (naively?) by using a ...
How can I add an image to some text via css? I've got this: <span class="create">Create something</span> and I want to add a 16x16 image to the left of that by using css. Is this possible or should i just manually add this image like so: <span class="create"><img src="somewhere"/>Create something</span> I'd rather not have to manu...
I am making this web site http://www.christopherbier.com/gbg/locations.html In safari on mac the content div is larger in width than it is in other browsers. It overlaps the right side bar bit. I am not sure how to fix this. Here is my css: #mainwrap { width:1000px; margin-right:auto; margin-left:auto; background-color:...
I need to build a form for data input, let's say FirstName and LastName. I know how to do this with a table. In the first <td> I'd put a label tag and in the second I'd use an input tag with a type="text" attribute. This way the labels and textboxes would be lined up in two columns. Is there a way to do this with CSS? Thanks Lars ...
Several pages on our e-commerce web app allow users to filter a status list of requests they've submitted to us. The filters are usually something like: All Pending Completed We have them set up as links. We'd like to style them so that the currently active filter is highlighted with a colored rectangle (w/rounded corners, natch!...
How does the DiggBar work? I'm trying to make an ASP.NET MVC DiggBar clone just for learning purposes and does anyone have a suggestion on how to specify the url of the content for the lower frame? How would you go about constructing that in MVC? Also, I know that it is an iFrame, but how do they position it so regardless of scrolli...
I want to design my a friends list page that is almost identical to Facebook's, how there is a thumbmail image with some text beside it (that is aligned with the top of the graphic), and then surrounded by a gentle box. Can someone provide some sample HTML/CSS for this? ...