An ul list against a float:left is giving me serious headache in IE 9. It worked fine in IE 7 and IE 8, and now it doesn't. I've tried to change the doc type to no avail. If I leave the doctype out of it, it works fine..... but that's not the way to go.
The following example will put the bulletpoints over the yellow area in IE 9. Any pointers at all?
Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body{
background-color:grey;
}
.somewrapper{
width:500px;
background-color:white;
float:left;
}
.imagewrapper{
float:left;
width:180px;
height:140px;
margin-right:30px;
background-color:yellow;
}
ul{
margin:0px;
padding:0px;
margin-left:25px;
}
ul li{
list-style:disc outside none;
}
</style>
</head>
<body>
<div class="somewrapper">
<div class="imagewrapper">
</div>
<div class="teste">
<h2>asdklfjaøskljf</h2>
<ul>
<li>aøsklfjaøs jasas fasfklf aaasfasasfa sfasfsdfasfas fasf asfasfasfasfasf asf as fasføsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
</ul>
<h2>asdfasfasfasdfasf</h2>
<p>asdfasfasfaskjf aklsjf asjklf askljf </p>
<ul>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
</ul>
<h2>asdfasfasfasdfasf</h2>
<p>asdfasfasfaskjf aklsjf asjklf askljf </p>
</div>
</div>
</body>
By adding overflow:hidden, and then some padding tweaking I solved the most worst part. It wont flow completely around, but it will work good enough!
So overflow:hidden is the answer.
An alternative answer is to use list-style-position: inside;
Related
I'm trying to add padding above and below each element of a list. Here is my current code:
<html>
<head>Basic Report</head>
<body>
<p>
A<br>
<ul>
<li class="pad">B</li>
<li class="pad">C</li>
<li class="pad">D</li>
<li class="pad">E</li>
<li class="pad">F</li>
<li class="pad">G</li>
<li class="pad">H</li>
</ul>
</p>
</body>
</html>
This is my css:
p{
font-size:14;
}
* {
font-family: Calibri;
}
.pad {
padding-top:50px;
padding-bottom:10px;
}
Two questions:
The padding isn't working. Why is that?
Is there any way to add padding to all the elements with one bit of code? Or do I need to add class="pad" to each list item?
I'm a total noob at html and css btw. Thank you for your help.
There isn't any problem with your code. I recommend you select all
of the li tags just like this li {} instead of giving each of
them a class. you can also use padding-block for top and bottom and
padding-inline for right and left.
The reason why you can't see the padding might be that you haven't linked the right file or referenced the wrong address. Cause I copy pasted your code and it was working for me.
p {
font-size: 14;
}
* {
font-family: Calibri;
}
li {
/* padding-top: 50px;
padding-bottom: 10px; */
padding: 50px 0 10px 0;
/* you can also use padding-block for top and bottom and padding-inline for right and left */
}
<p>
A<br>
<ul>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</ul>
</p>
Your code is correct and padding should work maybe your CSS file is not linked properly.
an easier method of doing what you want to do is you can give a class to its parent and do it as I did in the code below.
.list li{
padding-top:50px;
padding-bottom:10px;
}
<body>
<p>
A<br>
<ul class="list">
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</ul>
</p>
</body>
There is no style difinition in the posted HTML markup. So I assume the CSS is in another file. You have to link it.
And by the way, <head>Basic Report</head> is not valid... It probably should be:
<head>
<title>Basic Report</title>
</head>
And then, you can add a link to the CSS file:
<head>
<title>Basic Report</title>
<link rel="stylesheet" href="mystyle.css">
</head>
do I need to add class="pad" to each list item?
You could do:
li{
padding-top:50px;
padding-bottom:10px;
}
to avoid the class addition in the HTML markup...
there is no problem with the padding it works, you can directly target the tag
CSS code:
*{
font-family: Calibri;
}
p{
font-size:14;
}
li {
padding-top:50px;
padding-bottom:10px;
}
How do I display four (4) unordered lists horizontally?
lists.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<title>
HTML Lists
</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>
HTML Lists
</h1>
<div id="container">
<ul id="k">
<li>katakana</li>
<li>katakana</li>
<li>katakana</li>
<li>katakana</li>
<li>katakana</li>
</ul>
<ul id="ki">
<li>katakana-iroha</li>
<li>katakana-iroha</li>
<li>katakana-iroha</li>
<li>katakana-iroha</li>
<li>katakana-iroha</li>
</ul>
<ul id="h">
<li>hiragana</li>
<li>hiragana</li>
<li>hiragana</li>
<li>hiragana</li>
<li>hiragana</li>
</ul>
<ul id="hi>
<li>hiragana-iroha</li>
<li>hiragana-iroha</li>
<li>hiragana-iroha</li>
<li>hiragana-iroha</li>
<li>hiragana-iroha</li>
</ul>
<ul id="i">
<li>Image</li>
<li>Image</li>
<li>Image</li>
<li>Image</li>
<li>Image</li>
</ul>
</div>
</body>
</html>
style.css
#container {
display: inline;
}
ul {
list-style-position: inside;
}
#k {
list-style-type: katakana;
}
#ki{
list-style-type: katakana-iroha;
}
#h {
list-style-type: hiragana;
}
#hi {
list-style-type: hiragana-iroha;
}
#i {
list-style-image: url(images/myimage.png);
}
ul {
list-style-position: inside;
display:inline-block;
vertical-align:top;
}
and display:block on the #i
#i {
list-style-image: url(images/myimage.png);
display:block;
}
fiddle- http://jsfiddle.net/nNRDa/ http://jsfiddle.net/nNRDa/1/
note: IE7 only supports display:inline-block on elements that are naturally inline.
The following will work if with has been given to ul and container
#container {
display: block;
width:100%;
overflow:hidden;
}
ul {
width:15%;
float:left;
margin:20px 3% 0 0;
display:block;
vertical-align:top;
}
width can also be given in px.
When I toggle IE9's Compatibility VIEW on/off, my navbar shifts positions:
When Compatibility View: ON:
navbar is centred fine. :)
When Compatibility View: OFF:
navbar is shifted to the right slightly. :(
NOTE: I could NOT attach a screenshot due to certain site restrictions. :(
Obviously I would like to correct this, but cannot; thus, why I am posting here. :)
My CSS file looks as follows:
/*background image for outside area*/
#outside {
background-image:url('/images/body_bg.gif');
}
/*style for main area*/
#main {
font:16px "Trebuchet MS", arial, verdana, serif, monospace;
margin-left:auto;
margin-right:auto;
width:1020px;
border:5px outset darkgrey;
background-color:white;
}
/*background image*/
#bg {
background-image:url('/images/content_bg.gif');
}
/*horizontal list item widths*/
ul.two li{width:50%;}
ul.four li{width:25%;}
ul.five li{width:20%;}
/*submenu list item widths*/
ul.sfour li a{width:25em;} /*alternate value = 19.1em*/
ul.sfive li a{width:18.5em;} /*alternate value = 15.3em*/
/*top navigation bar*/
#topnav ul {
list-style-type:none;
margin-left:auto;
margin-right:auto;
width:100%;
overflow:hidden;
}
#topnav li {
float:left;
}
#topnav li a {
background-color:#606060;
color:white;
display:block;
font-size:large;
font-weight:bold;
font-variant:small-caps;
padding-top:4px;
padding-bottom:4px;
text-align:center;
text-decoration:none;
}
#topnav li a:active {
color:yellow;
}
#topnav li a:hover {
background-color:#888888;
}
/*topnav submenus*/
#topnav li ul {
display:none;
position:absolute;
}
#topnav li:hover ul {
display:block;
}
#topnav li:hover li {
float:none;
}
#topnav li:hover a {
background-color:#888888;
}
#topnav li:hover li a {
display:block;
font-size:small;
font-weight:normal;
font-variant:normal;
text-align:center;
text-decoration:none;
}
#topnav li:hover li a:hover {
background-color:#B0B0B0
}
/*page title*/
h1 {
border-bottom:3px solid black;
color:gray;
margin-left:auto;
margin-right:auto;
width:90%;
}
/*content*/
#content {
margin-left:auto;
margin-right:auto;
width:90%;
}
My _Layout.cshtml file is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>C4DP - #Page.Title</title>
<link href="#Href("~/Styles/Style.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/scripts/functions.js"></script>
<script type="text/javascript" src="/scripts/sorttable.js"></script>
</head>
<body id="outside">
<div id="main">
<img src="/images/title_c4dp.gif" alt="C4DP" width="100%"/>
<div id="bg">
<div id="topnav">#RenderPage("~/navbar_Top.cshtml")</div>
<h1>#Page.Title</h1>
<div id="content">
#RenderBody()
</div>
<div id="bottomnav">#RenderPage("~/navbar_Bottom.cshtml")</div>
</div>
<p id="copyright">© 2012 C4DP. All rights reserved.</p>
</div>
</body>
</html>
The navbar file looks as follows:
#if (WebSecurity.IsAuthenticated) {
if (!Roles.IsUserInRole("admin")) {
<ul class="four">
<li>News</li>
<li>Stats
<ul class="sfour">
<li>Earnings</li>
<li>Session Average</li>
<li>Ranking</li>
</ul>
</li>
<li>Profile
<ul class="sfour">
<li>Personal Info.</li>
<li>Change Password</li>
</ul>
</li>
<li>Logout</li>
</ul>
} else { //logged in as administrator
<ul class="five">
<li>News</li>
<li>Stats
<ul class="sfive">
<li>Earnings</li>
<li>Session Average</li>
<li>Ranking</li>
</ul>
</li>
<li>Admin
<ul class="sfive">
<li>Cardrooms</li>
<li>Events</li>
<li>Members</li>
</ul>
</li>
<li>Profile
<ul class="sfive">
<li>Personal Info.</li>
<li>Change Password</li>
</ul>
</li>
<li>Logout</li>
</ul>
}
} else {
// nav bar when NOT logged in
<ul class="four">
<li>Home</li>
<li>Rules</li>
<li>Login</li>
<li>Request Membership</li>
</ul>
}
Please help!
It turns out that my navbar needed the {display:inline;} and {padding:0;} attributes added to it to make it work.
Not being a real guru at this stuff, I assume the INLINE attribute prevented it from being "pushed over" by its neighbouring element, and that the PADDING:0; attribute ensured that the navbar fit properly in its parent element.
If a "real guru" (someone with more experience than me) could confirm my assumption, that would be much appreciated. Thank you in advance.
av been scratching my head because of this for too long.I would like to change the width and height of easy slider version 1.7,i have gone through the faqs part of this site after researching in so many other places and cudn't get a solution.Please help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pilot project</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>
<link href="pilotp.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="v1.7.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="header">
<div class="menu">
<ul>
<li>Home</li>
<span>
Web Hosting
Domain Registration
</span>
</li>
<li>Consultancy
<span>
I.S Audit
Information Security
</span>
</li>
<li>
Career's
</li>
<li>
Contact Us
</li>
<li>
Testimonials
</li>
</ul>
</div>
</div>
<div id="container">
<div class="slidercontainer" style="background-color:fuchsia;width:800px;height:300px"><!--Will hold the slider -->
<div id="content" style="background-color:yellow;width:800px; height:299px;">
<div id="slider" style="background-color:pink;width:800px;height:298px;">
<ul>
<li><img src="images/01.jpg" alt="Css Template Preview" /></li>
<li><img src="images/02.jpg" alt="Css Template Preview" /></li>
<li><img src="images/03.jpg" alt="Css Template Preview" /></li>
<li><img src="images/04.jpg" alt="Css Template Preview" /></li>
<li><img src="images/05.jpg" alt="Css Template Preview" /></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
this is the css
/* Easy Slider */
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider ul li, #slider2 ul li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:800px;
height:241px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:696px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(../images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(../images/btn_next.gif) no-repeat 0 0;
}
/* numeric controls */
ol#controls
{
height:28px;
margin-top:-20em;
margin-bottom:1em;
margin-right:0px;
margin-left:8px;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
}
ol#controls li
{
margin:0 15px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a
{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a
{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/*just added */
ol#controls { margin: -30px 0 0 0 !important; }
/* // Easy Slider */
See line 73-76 in the CSS file screen.css:
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
And also change the width of the container:
#container{
margin:0 auto;
position:relative;
text-align:left;
width:696px; /* change this */
background:#fff;
margin-bottom:2em;
}
I have fixed it and it involved changing (increasing or decreasing) the width and height of
#slider ul li
{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:796px;
height:246px;
overflow:hidden;
}
The width and height of the images are of importance also.
Thank you for you assistance!
In javascript file (easyslider.js) remove:
obj.width(w);
obj.height(h);
I've got a simple <ul> which has a position of fixed, with the height set to 100% and overflow to auto. This allows me to scroll when the height of window becomes less than the height of the unordered list.
The only problem with this is that I want the unordered list to be 30px from the top of the page. When the scrollbars appear the bottom part of the <ul> is actually missing, and furthermore the bottom part of the scrollbar is missing due to the top margin.
Here's some sample markup:
<div id="sidebar">
<ul>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
</ul>
</div>
And the CSS
div#sidebar {
width:148px;
height:100%;
overflow:auto;
position:fixed;
margin-top:30px;
}
Any ideas how to get around this quirk?
EDIT: Argh, forgot to add position:fixed
The idea is to have the 30px on an element other than the height 100% element since the margin and the 100% add together to create the final element height (and: 100% + 30px > 100%). By putting a padding on a containing div, you can get the same effect.
Try this.
<div id="container">
<div id="sidebar">
<ul>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
</ul>
</div>
</div>
div#container {
padding-top:30px;
}
div#sidebar {
width:148px;
height:100%;
overflow:auto;
}
As Joel said, margin + height add together, so you should use a container.
Also, bear in mind any possible outer margins or paddings. This should work perfectly (tested on IE7 + Opera 10), provided you don't have any other markup bothering there:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<style type="text/css">
html, body{
height: 100%;
padding: 0;
margin: 0;
}
.container {
padding-top: 30px;
width:148px;
}
#sidebar{
margin: 0;
width:148px;
height:100%;
overflow:auto;
background: red;
}
</style>
</head>
<body>
<div class="container">
<ul id="sidebar">
<li>...</li>
</ul>
</div>
</body>
</html>