Im encountering a misalignment issue with IE. Below is a sample output. When IE creates a second line due to the long text, the whole paragraph gets mis aligned. Making the 2nd line pulled to the left. I want the first and second line to be aligned to the left. Just like a normal text-align: left will do.
http://img.photobucket.com/albums/v682/markeeh/alignment_tissue.jpg
Below is the code:
<style>
.ul_content-l { width:330px; list-style:square inside; margin-left: 295px; padding-left:1em; text-indent:-1em; line-height:16px; }
</style>
<ul class="ul_content-l">
<li style="border: 1px solid black;">Modular carpet offers hospitals and care homes a calming environment to speed patient recovery</li>
<li>Hygienic guarding against bacteria through Intersept® antimicrobial protection</li><li>Improved patient comfort and well-being</li>
<li>Therapeutic surroundings with less noise and less stress</li><li>Use of colour and design for more cheerful facilities </li>
</ul>
Hope someone other there is willing to help. Thanks. :)
use this
.ul_content-l {
width:330px;
list-style:square;
margin-left: 295px;
padding-left:10px;
line-height:16px;
}
Try to reset margins for li and ul.
Like:
ul, li {margin:0;padding:0;}
and than just set them again the way you want with
ul.ul_content-l { code here }
ul.ul_content-l li { code here }
Also try to be consistent and use only px or only ems.
Related
We have a left nav that I am trying to tweak just a tad. Please don't critique the validity of the HTML, we have a CMS and external developers that are driving the ship and, frankly it works for now.
What I want to do is apply a style to <DIV>s that are after the <DIV class="nav_selected">, I just want indent them with some padding-left:30px;
Thats it, but everything I have tried applies to the "nav_selected" div as well which is what I dont want. It is kind of a header, and the divs under that are children.
<div class="left_nav_2">
<div class="left_nav_2_container">
<ul class="no_bottom_border">
<div class="nav_selected"><li><h2>Link 1 Selected</h2></li></div>
<div><li>Link 2</li></div>
<div><li>Link 3</li></div>
</ul>
</div>
</div>
You can try creating a class for the first line, then use a negation pseudo class to utilize it.
:not(/*put all the classes in your css document here.*/){ /* put the css you want for it here.*/}
Something like this could work too:
CSS
.no_bottom_border li{
padding-left: 30px;
}
.no_bottom_border .nav_selected li{
padding-left: 0px;
// or just the opposite values of the .no_bottom_border li
}
Is it something like that?
ok you can use this:
ul.no_bottom_border > div:not(:first-child) {
padding-left: 30px;
}
hope it helps
Here it is which you want
Add padding-left to both the divs like
.no_bottom_border li{
padding-left: 30px;
}
.nav_selected li{
padding-left: 0px;
}
I've being trying this for about 5 hours already, and I'm feeling really, really dummy. :s
The overall code is w3c validated.
The problematic snipped:
http://jsfiddle.net/ZnzYk/
I've tried making the circle bullets with css using border radius;
I've tried using a pseudo element.
I've tried using sprites.
The bullet must be (more or less) on the vertical-middle of the text, cross browser, starting from IE8.
So I give up all methods and I'm trying with a background image.
THE CSS:
#main-navigation ul li {
display:inline;
}
#main-navigation ul li a {
font-family: 'Miso', 'Helvetica Neue',Helvetica,Arial,sans-serif;
display: inline-block; /*seems to help on IE*/
font-size: 1.25em;
margin-right: 6%;
text-align: right;
text-transform: uppercase;
background: url('http://s7.postimage.org/fvy10uk1j/bullet.png') no-repeat 100% 50%;
padding-right: 4%;
text-decoration: none;
}
#main-navigation ul li a:hover {
color: #ED1E79;
text-decoration: none;
background: url('http://s7.postimage.org/puiznbth3/bullet_Selected.png') no-repeat 100% 50%;
}
THE HTML
<div id="main-navigation">
<ul>
<li>item 1</li>
<li>and this is item 2</li>
<li>item 3</li>
</ul>
</div>
I get everything but consistence. :(
I don't mind if it stays more or less really, but all least, not that different as it is right now.
Update:
After Asif suggestion:
adding padding-top to 3px has made them look more or less the same on IE 8, IE9 and good browsers. But it feels like a bit hacky and still not consistent (on IE the bullet it's more on top, on all others the bullet it's on bottom (due to the padding-top added);
Isn't there a better CSS code to have the bullets vertically aligned with the text, that don't require a px by px adjustment ?
The intended result:
May be you should add some padding-top:2px (or 3px too) into #main-navigation ul li a.
It works fine with my browser than, did not check it on all.
check here: http://jsfiddle.net/ZnzYk/1/
Hey i just got one more thing to you, I don't know it may help you.
vertical-align: middle
Here you can play with it at w3schools.
Can anyone tell me why in the image below the text information is not on the same level?
As far as I'm aware, the exact same styles are governing both the email address and the other stuff, but they're not level...The only styles I've added are the ones printed below and then there's the default stuff that comes with the wordpress blogging software.
If you're willing to help, it might be easier if you visit the site. Thanks
www.dodomainer.com dodomainer.com
Links
<div class="topnav">
<li><span class="class6">||</span><span class="class7"> My abilities in 6 modern languages (中文, Deutsch, French, Spanish, 日本語 & English) can help you find new value in the daily drop list</span></li>
<li><a href="http://dodomainer.com/"><span class="class7">mike#</span>
<span class="class7">dodo</span><span class="class7">mainer</span><span class="class7">.com</span></a></li>
</div>
CSS
.custom .topnav li { float: right; padding: 3px 10px 3px 0px; }
.custom .topnav li a { font-size: 1.5em; color: #000000; }
You can add line-height: 1.5em; to topnav DIV to fix the vertical alignment issue of the nav items.
But in reality you have bigger problems than that. Why are your list items not contained in a list? <li> should be inside a <ul> or <ol>.
UPDATE:
Now that you have a list wrapping your list items, you can get rid of the bullets by adding this to the list itself: list-style: none;
Also, are you really married to the idea of having such long double lines between the list items? If not, then remove font-size: 1.5em; from class6 and your alignment issues will be solved.
Well for a start your html is all messed up, you have <li>'s inside your top div with no <ul>.
This seems like it ought to be ridiculously easy, but I'm having trouble figuring it out.
I want to replicate the <li> function so the disc image appears to the left, but applied to a tag
I have this, but it does not show the disc image.
.list {
margin-top: 15px;
margin-bottom: 15px;
list-style:disc outside none;
display:inline;
}
<p class="list"><em>And Much, Much More!</em></p>
I want to avoid using any graphics to simulate the bullet if at all possible.
Thanks for the help
Answer:
display: list-item;
Display must be set to list-item - not inline, and not list!
.list {
list-style:disc outside none;
display:list-item;
}
<p class="list"><em>And Much, Much More!</em></p>
Well, a p is not a list. Why not use <ul><li>?
[edit]
Let me elaborate.
The problem is that you set this style on a list, while the disc is shown in the list items. A p has no items in that sense, so there's nothing to apply the disc to.
Only add following style
display:list-item;
I'm designing a custom wordpress template for some friends, and want a horizontally justified top menu. All would be fine, except that wp_page_menu outputs the list elements all in one line, which (after a LOT! of head-scratching) appears to break the formatting and removes all space between the elements. For example, the following outputs 1, 2 and 3 spaced out and then 456 all together. (Tested in Safari, Firefox and Chrome, all on mac.)
<style>
.menu {
text-align: justify;
width: 700px;
margin: 10px;
}
.menu * {
display: inline;
}
.menu span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
</style>
<div class="menu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li><li>5</li><li>6</li>
</ul>
<span></span>
</div>
I've already got a custom function editing the output from wp_page_menu to add the span after the ul, so I guess the easiest thing to do would be to extend that function to put the line breaks in as well, but if anyone's got other ideas, or can tell me why this is happening (especially that!) that would be great.
EDIT:
Have fixed it now by adding a function that inserts a space to the html (code below if anyone's interested for now or if someone comes across this in the future). Seems that was all that was necessary! Would still be interested to hear if anyone can tell me why this is needed.
// Add a space after the </li> in wp_page_menu to allow justification of the menu
function add_break($break) {
return preg_replace('/<\/li>/', '</li> ', $break, -1);
}
add_filter('wp_page_menu','add_break');
To answer your question, that's how xHTML works.
If you have the following:
testtest1
That would show up as
testtest1
And if you have the following:
test test1
That would show up as
test test1
Now, the same logic works for <li> elements, as well as various other selectors such as <img> selectors.
Have you have had a header with three images in a line, but when you tried to do this:
<img src="#" />
<img src="#" />
<img src="#" />
That will insert a space ( ) after each image, whereas having them in line would not.
Your function accomplishes exactly what you wanted. You could've done it using Javascript or CSS as well, but your solution is better. Just in case you are curious, here is how to do it with CSS:
.menu li:before {
content:' ';
}
Hope that helped.
instead of display:inline, try floating your lis left. then maybe:
no:
.menu * {
display: inline;
}
instead
.menu li{
float:left;
padding:0 5px;
list-style:none;
}
I guess i kind of embelished with the other stuff but give it a try!
If I understand it correctly - what you really need is a tabular layout.
Try adding this to the css:
.menu { display: table; }
.menu ul { display:table-row; }
.menu li { display:table-cell; }
You could just ditch the li tag altogether and just make them div's with the same class name.