There's a ton of blank space at the bottom of my page - http://shop.promaholics.com/? (It loads slow on the dev server, sorry).
I've been through the CSS lots looking for min-height type attributes but can't find any that would be causing this. Perhaps I've gone blind.
Any ideas what I can do to reduce that blank space at the bottom?
Thanks!
its the UL with class level0
right... you have a dropdown menu in "favours" in the menu that is causing the problem... its got too many elements (see if you mouseover "favours" it will be the length of your page).
Its because the script isn't hiding the element - its just moving it 10000 px to the right... :/ can you change this by using display:none;?
Change to this...
/* 2nd Level */
#nav ul { position:absolute; width:15em; display:none; border:1px solid #452915; }
/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub { display:block; top:39px; z-index:999; }
I tried it with disabling javascript and it removes the blank space at the bottom. I'm not sure in which script it's affecting it yet.
If you remove the class from the main-container col1-layout div then the blank space is greatly reduced - try looking for stray CSS in that class.
Edit: Wait, that's just because the images are no longer displaying inline. Whoops.
Related
I tried for so long to get rid of the spacing , can someone tell what I need to do.
I am new to web development.
Thanks in advanceyou can see the white line spacing about my menus
This is most likely because the <body> tag of your page has a margin. You can remove this with the following CSS:
html, body {margin: 0; padding: 0;}
The easiest way to figure this out is to use a tool like Chrome Developer Tools or Firebug to check your elements of your page. It will quickly show you where your CSS issue is.
Basically.. Just use this CSS
#nav {
margin-bottom:0;
padding-bottom:0;
}
#menu {
margin-top:0;
padding-top:0;
}
Replace nav and menu with you tag, ID, or Class name you used. Since I don't have your code, I can only go so far with customization.
I also just wrote it to close THAT gap.
Here is my current jsfiddle for the navigation bar.
http://jsfiddle.net/EPh6j/28/
Please stretch the bar so it is a single line otherwise you will get mixed results.
The problem only occurs in ie9 as far as I know. What happens is when you hover over one of the main links the drop down comes down. However, as soon as the drop down passes the bottom of the main menu it turns invisible. What is even more confusing is that the ul border for the submenu shows but not the elements.
Here is an example of what I mean:
Notice how it is visible and then disappears past the bottom.
http://i.imgur.com/jXsoE.png
I did the above when I was trying to figure out my problem to start. In the jsfiddle, it moves all the way down as it should and is thus completely blank.
I'm completely stumped on getting this one to work.
My CSS:
.menu li li {
float:none;
position: relative;
}
.menu li ul {
left:0;
position:absolute;
top:0;
visibility:hidden;
}
.menu li:hover > ul {
top:100%;
visibility:visible ;
}
Suggestions?
I suspected a z-index issue, so I stripped them all from your fiddle. Seems to have fixed it.
BTW, "sponsorships". ;-)
Hey guys I'm trying to create a horizontal navigation on the footer of a WordPress theme and was encountering several issues. I tried initially doing it as a display:inline which got it to be horizontal, but i want every element of the list to have a bullet point except for the first element. So I did a little research and came up with the following code
.menu-footer li{
list-style-type:none;
float:left;
margin-right:5px;
margin-left:5px;
}
.menu-footer li:before {
content:'\2022';
}
.menu-footer #menu-footer-navigation li:first-child {
list-style-type:none !important;
}
However the first-child isn't working as I feel like it should be. I've tried moving elements around and such and it hasn't worked. The list is being created dynamically through the WordPress backend and no matter what I try it's not doing what I want it to do, that's why I chose to come this way and ask for some help. Most the solutions that I have found come from this site, and haven't found one that works for my situation. You can see the site at http://goml.xxplosions.com if you are looking for a reference point.
Your second rule creates a pseudo-element containing your bullet point in front of every list item. To remove it from the first element you need to overwrite that exact rule:
.menu-footer li:first-child:before {
content: none;
}
Read more about pseudo elements:
https://developer.mozilla.org/en/CSS/Pseudo-elements
https://developer.mozilla.org/en/CSS/:before
Try adding this to the bottom.
.menu-footer li:first-child:before {
content:'';
}
I have created a dropdown menu using CSS and JavaScript and I'm having an issue making the sub-menus appear correctly on IE7. When you hover on an anchor tag the background changes to blue. The problem is that in IE7 the background only changes for the length of the text rather than filling the width of the ul. So, if you have one item that has a long name, the rest display incorrectly as shown by the picture below.
You can see the problem on jsfiddle here. Just make sure you open it in IE7 or use IE9 in compatibility mode.
I have tried a bunch of things like setting the width to 100% and the display to block but haven't been able to get it to work. Has anyone solved this problem?
Thanks
Well, let's see what do you have:
<li>Content</li>
so you can see that the problem is that the hover is being applied to the <a> and because it's not wide enough it does not work correctly.
Why don't you hover the <li> instead then?
changing from
#mainmenu li a:hover { background: #008de2; }
to
#mainmenu li:hover { background: #008de2; }
P.S. I'm using IE9, so I can't test it properly :-/
Try setting display:block on those anchor tags.
You may find your solution here (jsfiddle).
I made a few changes to #mainmenu li ul li, as well as adding #mainmenu li ul li:hover { background: #008de2;}. Seems fine on my IE7, IE9 (don't have IE8 to test), Safari, Firefox, Opera, and Chrome :)
My link is here:
Example Page
I'm using list-style-image: to give my horizontal lists ( very top and bottom ) seperators. I have a class of .first to remove the image from the first li in each list.
Lo and behold in IE6, it doesn't work. What happens is that the bullet images are not being displayed, and also the bottom few pixels of the text appears to be cropped.
Screenshot
I've fixed a few 'haslayout' bugs with this page, but I have a feeling its something to do with my rule hierarchy, although no amount of hacking about seems to work for me.
Can someone shed some light on this perhaps? Thanks.
Also, my colour change works on hover, but not the underline, in the same selector?
EDIT OK, I have used the background image technique that yoavf suggests, which seems to do the trick, but the cropping issue still remains. Looks like a separate issue then...
heres my revised CSS
#site-navigation li {
background-image:url(../img/site-nav-seperator.gif);
background-position:0 4px;
background-repeat:no-repeat;
float:left;
padding-left:15px;
}
#site-navigation li.first {
background-image:none;
}
further edit:
Managed to fix the cropping too, by giving the a tag some line-height.
#site-navigation a {
color:#666666;
display: block;
text-decoration:none;
margin-right: 1em;
line-height: 1.1em;
}
this bit feels like a bodge though :)
I know this isn't really a solution, but I would recommend using background-image instead of list-style image.
You'll achive the same effect, and it will work in all browsers.
Looks like a problem with margins and paddings of your objects inside site-navigation.
If you showed your CSS for those elements, we could check it faster :)