When I try to "float" my navigation, it gets bumped down, sometimes a few pixels, sometimes a lot. If I make the parent display:inline; it will remove the bump, but the structure is all messed up. If I remove the float from the nav it is not bumped down, but again, the structure is not what I need. I tried position:absolute; and position:relative; for both the nav and the parent and it doesn't help. I tried placing a clear:both; all over the place to no avail.
(I tried searching here and the google, but I don't know enough about what I am doing wrong to find an answer)
Here is a screenshot of 2 sites I have this problem with. The first one has that yellow gap above it that I don't want, the second has a few pixels of black above the dark gray, kind of hard to see. (If I remove the floats the gaps go away, but the structure of the menu fails)
The problem comes from using display:inline-block; where the browser automatically inserts a margin on the bottom of the element to allow for letter descenders. You can change your display to :block; if it will not break your layout. If not, you can add a negative margin to the bottom.
There are a few options here, that worked, depending on the layout I was using. Here are some that worked:
margin-bottom:-3px; or margin-bottom:-4px;
margin-bottom:-0.15em; worked too.
Related
The following example is a very simplified version of my top navigation.
http://jsfiddle.net/AEqxT/
If you look in most browsers, you should see two green list items next to eachother, with a blue box or 'badge' sitting on top, bridging the gap between the two. In IE7 however, the blue box always falls below the second li. I've tried all manner of fixes to this. Setting a higher z-index to the parent ul didn't change anything, and if I use position: relative; on the 'badge', it loses its width and height.
Is there an obvious fix to this that I am missing?
You'll probably struggle with your badge in with the LI, take it out of the list and you should be ok, with a bit of messing with position:
http://jsfiddle.net/AEqxT/2/
If you absolutely have to have it in with the LI, then you'll probably have to have some JS to make this work
This is a reported IE7 bug.
You could fix it with the JS solution posted to this question, or you could manually set different z-indexes to all <li> element, ordered from high to low values:
http://jsfiddle.net/AEqxT/3/
I'm having a problem with this page.
The .blog-footer div needs to clear on the right to correct for the height of the pictures introducing clear:right; causes the huge gap to appear on the page in FF and IE.
I'm at a loss, I've tried numerous ideas to get around the problem and at this point I've been staring at it too long to see the problem clearly. Can anyone help me out.
Thanks in advance.
Try using positioning. Add these to get you started:
#page-body {position: relative; width: 740px; margin-left: 20px;}
#sidebar {position: absolute; right:-190px;}
There are some subtleties, like getting the right behaviour when the content as a whole is not long enough to push the footer down, but I find those easier to work out than floating problems. With a fixed height footer like yours, that is easy to fix using a bottom margin on the page body and some more absolute positioning for the footer. You have gobs and gobs of extra divs to play with.
The clear attribute works relative to floating elements. So you can use it to make sure the footer closes the div below the picture, but the fact that your sidebar is floating as well actually pushes things down to the bottom of the sidebar.
So, as #Nicholas Wilson proposes, one solution is to position your sidebar using means other than float. And your layout doesn't appear to really require float for the sidebar.
In another direction, I noticed that you are currently hardcoding the heights of your pictures. Since you know these heights, another possibility is to forget about the clear:right for blog-footer , and add a min-height attribute to the asset-body, as in (this is for the beer festival)
<div class="asset-body" style="min-height:184px;">
Certainly not elegant or DRY, but if you had to you could do this or have javascript do it.
Got a nearly finished coded comp here:
http://clients.pixelbleed.net/biodesign/
I realize it's not completely valid, what with my nesting of li's and ul's within A tags. Unfortunately that's the way it has to be.
My issue is with the very bottom of the footer. It has a space showing the body's background color beneath it. Tried a number of things and this space after the black link bar on the very bottom is a resistant little bugger.
Ideally the black box on the bottom should rest against the very base of the view-port, at least when the content is sufficiently long--which it is in this case.
If someone would like to take a quick peak at my source and give me some ideas I'd be very grateful. The CSS can be found here: http://clients.pixelbleed.net/biodesign/css/core.css
And, yes, I've tried removing the height:100%. Makes no difference it seems. I do believe the issue to be with the footer, as when I remove these Div's the content rests as it should. Just don't see anything in my CSS to cause the margin/spacing issue though.
Thanks so much.
if you just remove the class "group" from asufooter-wrapper, the margin disappears.
Not the best solution, but one way to fix it is apply:
#asufooter-wrapper {
overflow:hidden;
}
The problem seems to be caused by some wrapping. However, I tried editing your white-space and widths to no avail.
I have a list of items that I am displaying in a floated list, with each item in the list at a fixed width so that there's two per row. What is the best practice to prevent this horrible thing from happening:
alt text http://x01.co.uk/floated_items.gif
Possibilites:
Trim to a specified number of characters before displaying the data. Requires guesswork on how many characters will be "safe".
Overflow: hidden. Hacky.
Remove the background and just have a top border on each item.
Possible but silly:
Have a scrollbar in each item by doing overflow: auto, this will look horrendous.
Add a background image to the container. It's not guaranteed that there's always an equal number of items so this option is out.
Any help on this irritating issue appreciated!
Are you using a fixed font size, i.e. specified in px? If not you also need to consider the various text size options of each browser which is probably going to make the concept of trimming the string redundant. If it is fixed then perhaps seeing how many Ws you can fit in and restricting your text to that -3 and appending an ellipsis, not sure what this list is for so that's one approach.
Personally I'd probably use overflow:hidden as that covers all eventualities and ensures that it'll always keep your layout consistent.
I guess the last option would be to keep a tight control over what can be added to the list and prevent the problem occuring in the first place. Prevention better than cure as they say, although probably unhelpfully.
There are scripts that help with this by comparing the li in blocks of two and making them both equal to the tallest.
Usually, rather than thinking what's best from a css point of view though, you should consider what presentation you want, then get the css/JavaScript to get you to your desired effect.
If this is something that you're just wanting out of the way, consider using a gradient background image that highlights the top of the li and suggests the block without actually filling it in.
Adding link to a jQuery solution: Equalize
One solution would be to have a alpha-based PNG that would slowly fade the text to the backgroundcolor of your container, on the last 10px or so. That would look good if some text are considerebly shorter than the long ones, however in the case where the text would be equal to the container it could look kinda silly.
Of course, in combination with display: hidden and white-space: no-wrap
From an accessibility point of view it's not a good idea to simply hide the title, since that could hide content on people who increase font sizes due to bad eyesight. Your design should be able to float when hit by bad resolutions or similar obstructions, even if it floats into something less pleasing to the eye.
Now if I understand your issue with the background image correctly, I believe your problem could be solved using the techniques describes in the ALA article on sliding doors, where the background image expands with the content.
Here's some controversy for you.. use a table?
Sounds like you have a grid of data to me, would a table answer this problem for you?
It also raises the question, do you actually want the items to be the same height, or just have the same amount of black background behind them? You could apply the black to the row's background, then create the centre white separator with borders and margins.
You could try using:
ul li{
display:block;
float:left;
width:6em;
height:4em;
background-color:black;
color:white;
margin-right:1em;
}
ul{
height:100%;
overflow:hidden;
}
div{
height:3em;
overflow:hidden;
background-color:blue;
}
Don't know about cross browser consistensy though.
EDIT: This is the html I'm assuming:
<div>
<ul>
<li>asdf
<li>asdf trey tyeu ereyuioquoi
<li>fdas dasf erqwt ytwere r
<li>dfsaklñd s jfañlsdjf ñkljdk ñlfas
<li>ksdflñajñldsafjñlksdjfñalksdfjlkdhfc,v.mxzn
</ul>
</div>
http://biochrom.fivesite.co.uk/catalogue4.asp
On the page above there is an image floated to the left. To the right of it is a list, titled "features". The list items have a background image, however, it isn't appearing. List 2 shows how the background image looks.
Does anyone know how I can make the bullets visible?
I know this is a year old post but others may want to know...
What happens if you are using a content management system and some pages have images & some don't you wouldn't want your list items to be 200px in the content?
You can add this CSS to your UL/OL element:
overflow:hidden;
I hope that helps.
Your image has a float:left property. The list items are therefore rendered "behind" the image.
margin-left:200px;
on the UL element will solve your problem.
Alternatively, you can apply a float:left on your UL-element. This will make it float right to the image, but will make the following content appear on the same line. You can prevent this by clearing the UL-element, or adding element after the UL-element with...
clear:both
...applied to it.
More information about this behaviour can be found at http://www.positioniseverything.net/easyclearing.html.
This thread is old indeed, but always relevant...
Another alternative solution:
display: inline-block;
Put this on the UL. It forces the entire ul to appear after the float. That way you can have a page with or without the image and it will always display correctly (checked on FF4, IE7 & 8, Chrome 11).
Alternatively, you could use the list-style-image property instead of background-image. I ran into this very problem the other day: the text-wrapping behaviour that floats exhibit on their 'neighbours' only applies to 'content', not background images (for example).