Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
For css like below could anyone tell me how I can apply css hacks for firefox, ie8, ie7, and ie6?
#category_area {
margin-bottom: 10px;
}
#categorytree ul {
margin: 13px 10px 0px 5px;
}
#categorytree li {
font-size: 13px; font-weight: bold; vertical-align: middle;
}
I'm afraid you can't make a common hacked selector for both IE 8- and FF.
You can get IE 8 and lower uniquely with the \9 hack at the end of the settings.
A css hack for FF would be the #-moz-document url-prefix() wrapper.
Here's an example.
#category_area {
margin-bottom: 10px\9;
}
#categorytree ul {
margin: 13px 10px 0px 5px\9;
}
#-moz-document url-prefix() {
#category_area {
margin-bottom: 10px;
}
#categorytree ul {
margin: 13px 10px 0px 5px;
}
}
BTW - 5 Reasons to Avoid CSS Hacks and Conditional Stylesheets
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm trying to tighten the border under the navigation menu. This is the CSS code I have:
CSS:
li.current_page_item a {
border-top: 0;
border-bottom: 3px;
border-style:solid;
line-height: 0;
border-bottom-color:green;
}
My website http://www.verbatimagency.com
Try this:
li.current_page_item a {
border-top: 0;
border-bottom: 2px;
border-style:solid;
line-height: 0;
border-bottom-color:green;
line-height: 0px;
height: 0px;
padding-bottom: 10px;
}
li.current_page_item {
line-height: 0px;
padding-bottom: 0;
height: 0;
}
It was the padding-bottom on the <a> tag. See the corrected preview:
You may need to adjust it accordingly.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I've the list items as follows. I'm using an Angular JS application. I need to represent them as drop down menu simply by using CSS. I should not include any JQuery js file
English
Español
Française
Italian
Here is my fiddle.. http://jsfiddle.net/CDrLV/
Can any one look into the following code?
You will want to hide the list with display: none; then show it again on hover.
See this jsFiddle for an example
with this you can http://jsfiddle.net/RdNw4/3/
But I don't know if it's work fine in IE. (probably not)
Help yourself with layout.
HTML
<div class="nav">
<div>Select Language</div>
<ul>
<li>English</li>
<li>Español</li>
<li>Française</li>
<li>Italian</li>
</ul>
</div>
CSS
* {
padding: 0;
margin: 0;
}
body {
padding: 50px;
background: #f3f3f3;
}
.nav {
padding: 10px;
border: 1px solid #ccc;
display: inline-block;
background: #fff;
position: relative;
}
.nav ul {
padding: 5px;
border: 1px solid #ccc;
display: none;
background: #fff;
list-style: none;
position: absolute;
top: 100%;
left: 0;
}
.nav:hover ul {
display: inline-block;
}
ps: I saw it here http://jsfiddle.net/UR4Up/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I ran into a problem while designing a layout for my new website.
I want to center my text within a horizontal line, like this using CSS but found no way of doing it:
------- Title -------
Any suggestions ?
See example: http://jsfiddle.net/qm9mk/1/
/* this code is pulled from:
https://gist.github.com/kjantzer/5436097
*/
/* creates a divider line with text
expects <el><span>Title Here</span></el> (where el = h1, h2, etc)
*/
.divider {
position: relative;
color: #999;
}
.divider span {
background: #fff;
position: relative;
padding-right: 10px;
}
.divider > span + span {
padding-right: 0;
padding-left: 10px;
}
.divider.align-right {
text-align: right;
}
.divider.align-right > span { padding-left: 10px; padding-right: 0;}
.divider.align-center {
text-align: center;
}
.divider.align-center > span { padding-left: 10px; padding-right: 10px;}
/* create the dashed line */
.divider:before {
content: '';
position: absolute;
left: 0;
top: 50%;
height: 1px;
width: 100%;
border-top: solid 1px #ccc;
}
.divider.dashed:before {
border-top-style: dashed;
}
This can be achieved with some simple css, I use the border bottom to create the dashed line, and an inline-block span element to cover over it.
http://jsfiddle.net/aqsPb/
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I recently refactored my web site to use HTML5. It works Ok with most browsers except, obviously, with IE7 and IE8.
It looks like it result from the use of the <header>, <section> and <article> tags which are apparently ignored by IE7. My css defines specific tag formating subclasses for these.
header { color: #fff; background: url("background1.jpg");
padding: 10px 40px 20px 40px; margin-bottom: 20px; }
header a { color: #fff; text-decoration: none; outline: none; }
header a:hover { color: #fff; text-decoration: underline; }
header h1 { color: #FFFFFF; font-weight: bold; font-size: 30px;
padding-bottom: 20px; padding-top: 0px; }
header h2 { color: #FFFFFF; font-weight: bold; font-size: 16px; padding-bottom: 10px; }
header hr { margin: 10px 10px 0px 0px; }
header .copyright { font-style: italic; font-weight: bold;
padding-left: 30px; padding-right: 0px; }
section { padding: 5px 40px 5px 40px; line-height: normal; }
article .main { font-weight: bold; font-size: 20px; line-height: normal; }
I skipped other style definition that don't cause a problem.
How could I get around this problem ? Do I have to drop the HTML5 tags ?
You can use this script in your head section:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Does most of the html5 work in IE for me :-)
The problem is that browsers have special treatment for tags they don't recognize at all; basic things like styles being applied and being able to contain sub-items won't work.
Html shivs, such as that linked by RTB, will inject the basic recognition of those html5 tags in via javascript so the browser recognizes them as valid tags, meaning you can then style them.
Libraries such as Modernizr also include an html5 shiv (though otherwise, Modernizr does not enable html5 functionality)
Note that a shiv does not generally allow anything but basic tag recognition, so you can style the elements. it does not enable functionality.
You could try and create elements in javascript and IE will render it.
document.createElement('header');
document.createElement('section');
document.createElement('article');
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am trying to code a design into HTML and CSS. It is a small snippet. I am having issues with the positioning and cant seem to put elements in their correct places.
My webpage can be found at http://www.sarahjanetrading.com/js/j/index.html
The design that I want to copy can be found here: http://www.sarahjanetrading.com/js/j/people-list.png
I also want the checkbox input to look like the one in the design. Can checkboxes be styled?
Change Your CSS like this :
#people-list #content h2 {
font-size: 16px;
float: left;
margin-left: 10px;
margin-top: 5px;
width: 355px;
}
#people-list #content small {
font-size: 12px;
color: #8F9092;
margin: 5px 0 8px;
display: block;
float: left;
width: 355px;
display: block;
margin-left: 9px;
}
#people-list #content .tags {
border-radius: 7px;
box-shadow: inset 0px 6px 2px 8px #f5f5f5;
border: 1px solid #E3E3E3;
padding: 2px;
font-size: 9px;
margin-right: 3px;
margin-left: 10px;
}
and Check this link for styling checkbox
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
yes ,checkbox can be styled, try to put the buttons in a div and change the display attribute to inline