I'm not doing anything fancy. And I've double and triple checked my code and tried various things. I have no idea why the dropdown is getting cut off. What is going on here?
http://nbkclientsite.fuzzpopstudio.com/
Hopefully someone can help.
you have overflow:hidden on your menu-themainmenu-container remove that and it works.
Have you checked you z-index for the drop down and the container that is overlapping it? I don't have access to a decent browser ATM, at my 'day' job... but it looks like the z-index is simply off.
Related
I made this website for my dad's business and you can see a contact form if you scroll a bit down. I'd like us to go to the Mobile View of the page through Google's DevTool (F12 and then Ctrl+Shift+M; or left besides "Elements"). I will show you what's wrong.
If you go to where it says "Treibstoff", try selecting the 4 different options. You will notice that you can't select the bottom two, "Diesel" and "Elektro".
Well, you can actually. If you press slightly above of the end of the word, but you can't select it like one usually does.
If we inspect the elements (Ctrl+Shift+C), we see that the box of "Typenscheinnr." is overlapping "Diesel" and "Elektro" (Inspect a bit above "Typenscheinnr.", not directly on it). A fix I found for this is: Inspect click the big overlapping box of "Typenscheinnr.", scroll down under Styles until you see that multilayered box, set upper margin to 45 with doubleclick.
This should fix it, but I don't know how to make this change go live. I did some research and all I got were solutions similar to "do !important" and then some code. Those were also for the whole site or something like that ...
Anyway, any help would be appreciated and I'm again sorry if this question is stupid. If there's more information you'd like to know, by all means just ask me.
Thanks for reading!
Just use clear: both
If you place a <div style="clear: both"></div> right before the end of the Treibstoff: <p> tag, the behavior will be the expected one.
This happens because you are using float
as you can see the red nav seems to poke out between elements, it looks terrible.
How can I fix this? I've been doing web dev for a week so hoping a veteran can help!
If anybody wants to see the code just ask, I'm having problem posting it directly on here..
Thanks
In your case to bring nav in front of all the elements you can give it z-index:-1 and position:relative.
Also refer to this fiddle.Hope it may help you.
http://jsfiddle.net/Xb2UT/4/
I am in the process of developing a site for a uni project, and I have built an automatically changing slider while only using css (it is a requirement of this project that I don't use anything else). The problem I'm experiencing is that when the slides change, the left margin begins to add up, and I can't figure out why.
I have tried making a page with just the html and css necessary for the slider to work and it works properly there, but not when incorporated into my main css page.
Any pointers would be appreciated!
The site this can be seen on is http://www.darkmatter-designs.com/
As you can see you have some margin between the images, which makes their widths effectively bigger a little bit. I see you applied a reset in your css, so this is probably coming from the white space in your html. A quick fix would be to put all the li and img on a single line with no spaces or carriage returns between them, like so:
<ul id="css-slider"><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_108.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_62.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_59.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_66.jpg" alt="slider"></li></ul>
I know, it's weird.
I can't figure out what the problem is.. The css is really messy, there is a lot of useless or overwritten properties.. You have to optimize it..
But somehow I found a workaround : set the width of the #css-slider to 864px.. It's not really a proper solution but it works anyway..
I am having a problem with a table. The table seems pretty ok with FF and Chome but IE shows some space top and below of the table. Could not figure out how to solve this. Any ideas to solve this problem? Thank you
Try using a reset.css and can you post us some of your code?
My first guess would be a you would need to set a height definition on the second box. If that doesn't work, I'd look at the padding definitions.
you will two points.
give vertical-align:top; to side box
if you give any padding? IE will takes padding double
in my header I've got a large image. Above that image I want to place my navigation.
The clue about it: The ul-Navigation-element got a gradient background. But if I hover an li-Navigation-Link I would like to display the underlying image! (Hope that's clear? Otherwise I'll do some photoshop to demonstrate) This should be flexible, meaning not to give each li-Element a specific snippet form the backgroundimage.
I would prefer a JS-solution instead of a messy markup. But I appreciate every possible idea you have on your mind. Maybe I'm just overlooking the most obvious and easy solution..
Best regards (:
Here is an image of what I tried to descripe. Hope it helps:
http://s7.directupload.net/images/110226/pv4v4c5r.jpg
There's no need for JS to do this, simply make it so that when you hover over the li-Navigation-Link, the element doesn't have a background attribute set.
This will create the 'transparency' that you want to achieve.
you can use background:transparent for a:hover. This will show the background.
(for internet explorer you could use filter:alpha(opacity=100) );
Here an example: http://jsfiddle.net/3C9sZ/2/
I just solved my problem with javascript/jquery. It can be found here http://jsfiddle.net/QwJKY/.