I have a <ul> which contains many lis and divs. The li's are autogenerated from inputs and labels, and the divs are floated right and serve as tooltips to explain each input.
The code is something as follows:
<ul>
<div>tooltip</div>
<li>input</li>
<div>tooltip</div>
<li>input</li>
<div>tooltip</div>
<li>input</li>
</ul>
This works fine in firefox and IE8, but in IE7, it assumes that each div is part of the previous <li>, and completely drops the </li> tags from the interpreted source code (found out from IEtester's View Source Code dev tool). Anyone know why this is happening and how to ammend it?
CSS:
.tooltip { float: right; width: 140px; font-size: 0.9em; padding: 9px 9px 9px 15px; margin-top: 15px; }
You can't have div inside the <ul> directly. They can go inside the <li> elements though. This may or may not help with the problem you're having but should be fixed to make sure it isn't the cause.
<ul>
<li>input<div>tooltip</div></li>
<li>input<div>tooltip</div></li>
<li>input<div>tooltip</div></li>
</ul>
Related
I've almost got my website finished but am growing incredibly frustrated and not being able to get the vertical-align to work. Everywhere else, my content is where it should be, but for reasons unknown, these lists are appearing in the middle... meaning when the iframe is set to the desired size, my lists move to the middle of their td?
I've tried adding the vertical align option to the css of the links, created a div option for the entire area, adding it html etc, no luck anywhere? What am I doing wrong? :(
A.class2 {text-decoration: none; text-transform: uppercase; font-weight: bold; text-align: left; font-size: 16px;}
A.class2:link, A.class2:visited {color: #0fa616;}
A.class2:hover, A.class2:active {color: #0fa616;}
#sub li {list-style-type: square;}
Please bear in mind that I have a main ul menu above that I do not want affected in any code anyone manages to fix for me.
<center><h2>Amber w/Inclusions</h2></center><ul id="sub">
<li>Baltic</li>
<li>Copal</li>
</ul>
<center><h2>Dinosaurs/Reptiles</h2></center>
<ul id="sub">
<li>Pterosaur</li>
<li>Raptor</li>
<li>Spinosaurus</li>
</ul>
<center><h2>Trilobites</h2></center>
<ul id="sub">
<li>Cambrian age</li>
<li>Devonian age</li>
<li>Ordovician age</li>
</ul>
You can see what I mean on the page http://www.dinodeals.co.uk/fossils.html
The table itself is only for aid during design, it won't be visible on the complete design. I would love a little divider also, say a green line to the right of the entire sub category menu I'm trying to set to the top. But had no luck implimenting that either after reading up how. I'm not sure the border-right css is usable anymore?
you can try this, I just inspected the page and found you are running some type of padding on your td element (most likely caused by it aligning to the middle).
Try this little snippet:
td{
padding-top: 0px;
vertical-align: top;
}
This aligned the table to the top on my screen.
EDIT:
As per your request for border on the right of it (I didn't see that far into the question).
td{
vertical-align: top;
border-right: 3px solid rgb(15, 166, 22);
padding: 10px 0;
}
I found some free source code online for a nice menu bar that I like. It came with its own stylesheet which worked fine, but it jacked up a lot of the vertical alignment on my existing site. I want the menu bar and all tables centered on every page--simple. But because of this new stylesheet, everything is kinda centered, but not quite, and sometimes it's way off center.
I can fix any page, case by case, by playing around with margin-left in various elements, but this is tedious, and whenever I add a menu item, or put 2 tables side by side, etc, the horizontal alignment gets all jacked up again. I'm looking for a simple, universal way to center my menu bar and tables so that when menu items are added or removed, or tables get wider or placed side-by-side, all the centering stays correct.
First, a visual:
As mentioned, I can get everything to align perfectly only if I change styles on a page-by-page basis and tweak it differently on each page. I'm looking for a global solution.
The body tag has a width set:
<body style="width:720px;margin: 50px auto">
The menu source instructions said I have to set a width on body, which I've never done before on other web pages. If I don't do it, all the alignment goes way off. It seems ideal to not have to set a body width, I'm guessing that's causing problems.
The HTML for the menu bar looks like this:
<ul id="nav" style="margin-top:-95px">
<li><img src="images/RefSlot_Menu.png" onclick="location.href='index.html'" title="RefSlot Home Page" style="cursor:pointer;width:119px;margin-right:78px;margin-left:10px"></li>
<!--<li>RefSlot</li>-->
<li>Organization
<ul>
<li>Create New Member</li>
<li>Your Members</li>
<li>Sites</li>
<li>Archived Groups</li>
</ul>
</li>
<li>Create Group</li>
<li>Profile</li>
<li>Contact Us</li>
</ul>
CSS on top-level UL:
#nav {
margin: 0;
padding: 7px 6px 0;
background: #777D85 url(images/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
CSS on each LI:
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
What can I do to force my content to center? Currently I'm having to tweak around with margin-left on BODY or TABLEs, etc, different on each page. Thanks in advance.
Working example: http://www.refslot.com/_stackdemo.html
Add following code to your css file:
body {
margin: 0 auto;
}
or change your body tag like this:
<body style="width: 720px; margin: 0 auto;">
I have created a simple navigation bar using html and css. The issue with it is when zoomed in, the structure changes as not all the links can fit in one line. Here is the jsfiddle: http://jsfiddle.net/HamishT/b3Lw4/
Here is the code in case you are unable to access jsfiddle:
<div id="navBar">
<ul>
<li class="nav">HOME</li>
<li class="nav">PRODUCTS</li>
<li class="nav">SERVICES</li>
<li class="nav">CONTACT US</li>
<li class="nav" id="order">ORDER</li>
</ul>
</div>
#navBar {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#5a5a5a;
font-size:12px;
font-weight:bold;
background-color:#eeeeee;
padding:0.1em;
box-shadow: 5px 5px 5px #888888;
}
.nav {
list-style:none;
display:inline;
border-left:3px solid;
}
.nav a {
text-decoration:none;
color:inherit;
padding: 0 20px 5px 20px;
}
.nav a:hover{
border-bottom:3px solid;
}
#order {
float:right;
color:#E65C00;
}
I have tried various ways, none to any success. One way I am wondering about is if I can edit it so that it will flow off the page if it doesn't fit (so only part of the width of the navbar is seen at one time), but I can't seem to work my head around it. Another way I think would be to detect the screen width/zoom and change the structure completely if the available space is too small, but I am unsure if this is possible (I've looked into it, but have not found any that seem to work the way I've described.
Just in case it helps: one thing I have spotted is the floats may be preventing me from being able to fix this.
Are there any ways to fix this and if so, how? I don't mind how it works (eg. flows off the screen or zooms the whole navbar out) so long as it does work. I've been stuck on this for three days now (I'm still new to it all) so any help whatsoever would be greatly appreciated.
The problem is caused because float is considering a 100% width for the navbar. Add a width in pixels to fix the size of the navbar, like this
#navBar {
width: 550px;
}
Although this will cause elements to flow out of current window (and hence bringing the scrollbar). Your best bet in such a case is make stuff responsive and create different styles for different widths.
When you zoom into the page, the size of the viewport is decreasing.
That means you can use media queries to create proper breakpoints:
#media screen and (max-width:600px) {
#navBar {
font-size:5px;
}
}
The 600px mark works well in my test case. But you can't reproduce it via jsfiddle. 5px aren't too small since you're zoomed in. The best approach however would be using em values instead of px since they allow to change the reference font-size: body { font-size:0.9em; }. This will be inherited by any other element.
I have found a solution (it may not be of use to everyone who sees this, but is one alternative solution to the issue). I put the li element that floats right in a separate div so that when zoomed in it will not drop below the others or overlap. Instead the other li elements will drop down before they overlap, whilst still working properly.
From the HTML, the #order element (float right) is in a div before the other li elements put into a new div.
<div id="navBar">
<div>
<ul>
<li class="nav" id="order">ORDER</li>
</ul>
</div>
<div>
<ul>
<li class="nav">HOME</li>
<li class="nav">PRODUCTS</li>
<li class="nav">SERVICES</li>
<li class="nav">CONTACT US</li>
</ul>
</div>
</div>
Here's a working jsfiddle to show what I mean: http://jsfiddle.net/HamishT/3pd5Z/#base
Can anyone tell me why the absolutely positioned navigation buttons in the top right corner of this page are not visible in ie7, but are working fine in all other browsers (including ie8 and 9)
Thanks!
For one you are using display:inline-block which isn't properly supported by IE7 or below (sometimes it works, others not -- depends on the element and the situation).
Use display:block and float:left instead as this is more supported (however if you see my first link you can using display:inline too).
Don't forget to include overflow:hidden in the surrounding UL element either otherwise you'll get strange results due to the float.
css:
#navlist {
list-style: none;
margin: 0;
padding: 0;
display: block;
overflow: hidden;
}
#navlist li {
list-style: none;
margin: 0;
padding: 0;
display: block;
float: left;
/* your styles from before */
background-color: #F2F2F2;
border-radius: 5px 5px 5px 5px;
color: black;
height: 20px;
padding-top: 2px;
text-align: center;
width: 20px;
}
markup:
<ul id="navlist">
<li id="li1">
<a id="link1" href="#">1</a>
</li>
<li id="li2">
<a id="link2" href="#">2</a>
</li>
<li id="li3">
<a id="link3" href="#">3</a>
</li>
<li id="li4">
<a id="link4" href="#">4</a>
</li>
</ul>
useful links:
http://aaronrussell.co.uk/legacy/cross-browser-support-for-inline-block/
http://www.quirksmode.org/css/display.html#t03
update:
Another thing you could try (if the above doesn't solve the problem) is to temporarily remove your conditional commented code for IE7 - just to make certain there isn't anything in there causing a problem:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<script type="text/javascript" src="Scripts/ie7.js"></script>
<![endif]-->
update:
Now that I've been able to actually test in IE7 the problem shows up if you enable borders - using css borders to debug is always a good idea :) The problem above is being caused by an child element pushing out the width of your parent element innerWrap. This wont affect more modern browsers, but IE7 and older always try and wrap their children no matter where they are placed or what size they are (unless you override this behaviour). Because your child element slideWrap is 3000px wide, it is causing your right positioned elements to vanish off the edge of the screen.
The following css should fix it:
#innerWrap { width: 100%; }
Use left or right properties with it in order to make them visible.
Way back in the day, we had to deal with browsers adding white space between elements if in the source markup we also had white space.
I thought that issue had all but disappeared but I rant into a situation today where the problem still exists. What's odd is that the problem isn't confined to a particular browser. It shows up the same problematic way in Firefox, Safari, Chrome and Opera and only slightly differently in IE.
Sample CSS:
<style type="text/css">
li {
display: inline;
background: pink;
margin: 0px;
padding: 10px 0px;
}
li a {
background: green;
margin: 0px;
padding: 0px;
}
</style>
Sample markup:
<ul>
<li>
hello
</li>
<li>
world
</li>
</ul>
<ul>
<li>hello</li>
<li>world</li>
</ul>
<ul>
<li>hello</li><li>world</li>
</ul>
Only that last UL appears the way I'd like it to appear...with the A tags spanning the full width of the container LI tag.
Given the consistency across browsers, this maybe is actually rendering as it should? Short of reverting to old comment hacks (starting a comment on the end of one line and expanding to the beginning of the next) anyone know of a workaround for this or why this is doing what it does?
Ideally, I'd float my LI's instead, but due to some other issues keeping then inline would be preferred.
Yup, whitespace is whitespace when it comes to inline elements. That's almost always exactly what you want. Take, for example, the following:
<p>I <em>really</em> <strong>really</strong> want that whitespace.</p>
Would suck pretty hard if that ended up rendered as:
I *really***really** want that whitespace.
If all the browsers render it a certain way, it's pretty likely that they're right and you're wrong. That goes double if all browsers except for IE render it a certain way...
I believe this is by design.
You have included white space (even if it is carriage returns) in your source so the browser is rendering this faithfully. I doubt there is a way around this apart from ensuring there is no white space between your elements.
You can just set the font-size of the container to 0, for example put that into a div and then set the propper font-size in the LI item