Is there a way to do this?
When using navigation that can change the number of items often, it would be nice not having to calculate the with and updating the css, but just having a solution that works.
if that's impossible (I'm assuming it is) can anyone point me to a javascript that can do this?
edit
re: provide code some code
basically I'm working with, what I think is, the most typical setup
<div class="main">
<div class="nav">
<ul>
<li>short title</li>
<li>Item 3 Long title</li>
<li>Item 4 Long title</li>
<li>Item 5 Long title</li>
<li>Item 6 Extra Long title</li>
</ul>
</div>
</div>
edit
.main {
width:100%;
text-align:center;
}
.nav {
margin:0 auto;
}
.nav ul li {
display:inline;
text-align:left;
}
the issue I've found with this/these solutions is that the content is nudged to the right
adding some right padding (of 40px) seems to fix this across the browsers I'm checking on (O FF IE).
.nav {
margin:0 auto;
padding-right:40px;
}
I don't know where this value is coming from though and why 40px fixes this.
Does anyone know where this is coming from? it's not a margin or padding but no matter what I do the first about 40px can not be used for placement.
Maybe it's the ul or li that's adding this.
I've had a look at the display:table-cell way of doing this, but there's that complication with IE and it still has the same issue as the other solution
edit (final)
okay I've tried some things in regard to the indent.
I've reset all padding to 0
*{padding:0;}
that fixed it, and I don't need to offset the padding
(I think I'll leave my whole process up so if anyone comes across this, it'll save them some time)
thanks for the comments and replies
I'm working on a website for a small law office. In the side-menu, I'm trying to highlight the "current page". I have tried changing the background of the LI, but this doesn't quite do the trick; the list item doesn't spread to the full width of the menu, so it looks bad.
Here's a jfiddle. I would like the yellow section to highlight like the pink section is highlighted: filling up the full vertical and horizontal space, not just highlighting the text.
Any suggestions on how to do this? I've included the style tag in the html just for example, obviously, and my real solution will be a little different when it's done. But I can't move forward until I figure out how to somehow highlight the entire line.
Hi,
i have this page.
login: [email protected]
password: m
As you can see in IE7 the selects for the age, and radio buttons are not well organized. In FF and IE8 no problem.
Any idea?
Regards
Javi
I have a div that is 200px by 200px.
If I want to place a 30x30px no-repeat background image at the top left corner position of 120px from the left and 50px from the top ... while also allowing the text inside that div to be displayed on top of the background image ... how would I do that?
I tried the following, but it doesnt appear to work.
background:url(http://example.com/background-image.png) no-repeat 120px 50px;
Any ideas how to perform what I want to accomplish?
For testing
I don't want to upload css to FTP on each change till site complete , but site and content is online. (i'm not talking about saving page locally then apply css)
Can i just apply css locally to any online page.
it would be easier to edit and see changes locally till css work end.
and i want to see applied effect on FF and IE.
How to do that? Is it possible.
Not sure why I am having such a hard time with this. Trying to add a 10px top margin to a that is inside of a div. But that does not add the gutter I want and just pushes the containing div down 10px.
Styles
#item{width:738px; height:168px; background-image:url(../images/item_bg.png);margin:0px auto;}
#description{width:314px; height:55px;}
#description p{font:12px arial; color:#666666;margin:10px 0 0 30px;}
HTML/PHP
echo "<div id='item'>
<div id='description'><p>{$row['description']}</p></div>
</div>";
If I use padding it works fine but I want to know why margin-top isn't working?
hi. i used this corner style:
.corners4{
background:url(../img/panelHeaderColor.jpg) repeat-x;
-moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
}
but, this doesn't work in IE, is there any IE equivalent for this?
thanks
Hi everybody,
I'm trying to make four columns that are centered on the frontpage. I would like it to look like this example:
http://www.clutterpad.com/
My code looks like this:
#bottom-container {width:100%;height:250px;position:relative;}
#bottom-mid {background-color:white;}
#bottom-left, #bottom-mid, #bottom-right {height:250px;}
#bottom-left, #bottom-right {width:50%;float:left;}
#bottom-left {background-color:white;position:absolute;top:0px;left:0px;}
#bottom-right {background-color:white;position:absolute;top:0px;left:50%;}
#bottom-mid {position:relative;margin:0px auto; width:1000px;z-index:2;}
#column-container {width:100%; margin:20px auto;}
.column {width:200px;float:left;font-size:10pt;font-family:Arial;margin:20px 10px;}
But it's not working out. How should I code it to look like the example I mentioned before?
So far I know, the conditional comments are only supported for different Versions of IE.
Likeways, can we provide conditional comments for other browsers too.
If Yes, How? If no, what could be the best alternative?
I need some help with the positioning of divs that appear on each #box's hover event.
The hidden divs should appear over the box that was hovered in a way that:
Each #tooltip div covers the box that was hovered plus the box next to it
The tooltips of boxes 1 & 2 should cover the boxes to the right
#tooltips for box 3 & 4 should cover the boxes to their left
(to make it more understandable, please see the attached image
There will be several rows of boxes so positioning should be relative and not fixed to the page dimensions (i suppose)
So far I haven't managed to get the #tooltip positionings right (I know that one should be absolute and the other relative but no matter my efforts, I haven't nailed it yet).
Here's a jsfiddle to work on and this is the result i'm after:
I have to show 25% right screen in such way that the text looks appeared from right. For this I need to set opacity from 0 to 100 at 25% right side screen means rightmost opacity would be 0 and at 75% the opacity would be 100.
For this, I took a Div and set opacity but It looks bad because of border. I need to gray out text. It looks a block.
Let me know how I can implement cross browser compatible gradient opacity mask for right screen text.
What is the best way to do this?
i have this
<li><a href="#" >title</a> <span style='text-align:right;'>(0)</span></li>
its not working
and this
<li><a href="#" >title</a> <span style='float:right;'>(0)</span></li>
its go to the down line (not working)
its appear like that
|title (0) |
i want it
|title (0)|
what I want:
when i hover upon a link it should fill the background with a fixed width (say 225px) background color.
the length of the text of the link should not be considered.
thank you so much.
How can I have each of these a elements break on to new lines, but keeping them as display=inline and without br tags?
<div>
<a href="element1">Element 1</a>
<a href="element1">Element 2</a>
<a href="element1">Element 3</a>
</div>
Hi All,
i need an equivalent or an alternative for this code in internet explorer using the filter method
background: -moz-linear-gradient(center bottom , rgb(132, 133, 132) 0%, rgb(35, 35, 35) 49%, rgb(104, 104, 104) 100%) repeat scroll 0% 0% transparent;
the most important thing in the code is the points ( 0% - 49% - 100% )
i believe that the filter method doesn't have points and doesn't accpect more than two parms for the colors ,
Is there a way to do it in filter or a javascript script for that ?
Thanks.
please give me the code.
input file:
#box8 {
position:absolute;
}
#box8 .buttons {
text-align:left;
}
output file should be like this:
headers:#box8
#box8
Items:position:absolute;
text-align:left;
in firefox I can usee firebug, in chrome I can use the css console. Both to make live changes to css for troubleshooting purposes. However I do not know of a way to do this in IE, which is where I have the most css issues.
So, whats the best way to troubleshoot css issues in IE?
Thanks!
Hi there, I would like to know some opinions from experienced developers on what they think the definitive way to size fonts (in a base sense). I know that working with ems is considered best but im referring to the best way to set the base font size.
There is the technique of setting font to 10px using 62.5 method but i think ie has an issue with rounding which throws this out slightly (perhaps not)
YUI framework uses
body {
font:13px/1.231 arial,helvetica,clean,sans-serif;
/* for IE6/7 */
*font-size:small;
/* for IE Quirks Mode */
*font:x-small;
}
which really confuses me!
Tripoli uses
html
{
font-size:125%;
}
body
{
font-size:50%;
}
a list apart suggest something along the lines of :
body {
font-size: 16px;
*font-size: 100%;
}
So which is the best either out of these methods or any alternatives. The best being the easiest to work with and the most reliable cross browser.
I may bounce my head off the wall shortly, I can't believe that something as stupid as this has utterly defeated me ... therefore I turn to you, Stack Overflow ... for guidance and enlightenment.
Problem: Sit div at foot of page, 100% width, outside of any sort of wrapper.
Proposed Solution: http://ryanfait.com/sticky-footer/
Implementation with content: http://www.weleasewodewick.com/redesign/index_content.html
Implementation with no content: http://www.weleasewodewick.com/redesign/index.html
with content - Good, works nicely
no content = bad, footer sits exactly height of footer below the viewport.
I really would appreciate your input into this, it's completely vexed me for the past hour. I wholly expect some form of ridicule :)
Thanks!
Foxed
Why W3C Validator showing parsing error on this. I selected CSS3 profile also from dropdown.
a[href $=.xls]{background: transparent url(ms-excel-icon.gif) left top no-repeat;
padding-left: 22px;display: block;height: 16px;}
I just need a sanity check here... DEMO
Basically, I can't figure out how to get the box under the link to get wider as more content is added. It seems fixed to the width of the parent div (or the width of, say, the longest element like the select or a really long word with no spaces), despite being absolutely positioned. I use this trick all the time with ul and li but it doesn't make sense to use that in my situation, and for some crazy reason it just won't work with a div inside a div.
I don't want to set a width (which, of course, works) because I don't always know what will be in this box. GRR
Thanks :\
In the bottom cap of this page (bottom with corners) I seem to be having a weird IE6 issue. I've tried Google with no luck, as really, how do you ask this question.
In IE6, the corner images that are floated left and right seem to cause the whitespace to drop.
http://www.duncanhadleytriathlon.ca/
Any suggestions for why this may be?
Hi
I am trying when user clicks on one of the images seen here
http://techavid.com/design/test.html
That the image in background is only thing focused. All icons are greyed out until user clicks and when they do the colored version of the icon is only showing. Currently the color image of each icon appears behind the greyed out version when mouseover not active.
Can this be done?
thank you,
paul
i have the following divs
<div id="outer"><img src="myimgpath"><div id="name">Username</div></div>
now i want to fix the inner div to the outer div's top right corner