The problem is menu openning in the wrong place only in firefox. I thought about putting top:2px position:relative but it`ll effect all browsers
http://img707.imageshack.us/img707/6884/unled1copyqj.jpg
my website; http://tinyurl.com/3g58vhb
You are using the position: absolute but do not define a top value. Try using top: x inside your CSS and it should be on the same position on every browser.
If your header can move up and down. Give the parent node of the submenu (LI) the css property position: relative, but still define the top property.
adjust the padding like this :
height: 17px;
padding: 6px 10px;
And add height to your nav li a { class, should work
Related
My collapsed dropdown menus are being hidden behind a sequence.js slider on Chrome and Safari. Issue doesn't appear to be happening on Firefox. Tried changing z-index on just about every object related to slider and menu. Much love to anyone who can inspect my site and tell me what I am doing wrong.
https://www.shopinspired.co/
It's not actually being hidden behind the slideshow.
This is due to the "sticky" class being removed from your header when you scroll to the top of the page. If #header always has .sticky, the menu shows fine.
It looks like your styles at the top of the page are targeting "header.sticky", not just "header".
Fix: Manually add the css:
#header {
position: fixed;
left: 0;
right: 0;
top: 0px;
box-shadow: 0 5px 5px -5px #333;
}
or change the CSS in the page head to target "header".
Explanation
Its is coming from the sticky header and a mismatch of positioned objects and forced heights.
By default, without the sticky header, the submenu is being hidden because it is a child element of a parent with a forced height due to some media queries. The overflow is being hidden.
When the sticky header is added, the header gets a position of fixed. You can not use absolute positioning relative to fixed elements. I am guessing your element is being positioned relative to the document window which is why it is now showing with the fixed attribute.
I have this problem that is driving me mad... I've been struggling with it for hours but can't figure out how to over come it.
I am using jqDock and want to place a toolbar in a "box" in a column. There is quite a lot of code included but you can see a sample here: http://ag.wasen.net/index.php?option=com_content&view=section&id=2&Itemid=17
Look at "Simple File Lister v2.0 #2" in the right hand side column where the toolbar is perfectly place. Then look at the left hand side where the toolbar goes vertical and is completely off track.
These two modules (as they are called in Joomla) is using the exact same code!
The difference between these two modules, the left one and the right is that the left one inherits a lot of CSS from the "div" statements in the left column.
The problem seems to be with the inherited "width" from a previously loaded CSS file. If I look at it in FireBug and remove the declaration for #leftcolumn div {width: 191px;} in FireBug the toolbar on the left is working fine.
I have tried to insert my own "width" on all different DIV's and using "!important" but even if FireBug shows the "#leftcolumn div" as stiked-out it still affects my toolbar DIV.
Regardless of how I have tried to "nullify" the inherited "#leftcolumn div" width it still affects my DIV.
Any clues on how I would be rid of it?
Regards,
Anders
Try the below css - Paste this in you template.css file and try to set the width if required on different selectors.
#main_bg #leftcolumn div.module_menu div div div, #main_bg #leftcolumn div.module div div .jqDocked div {
width: 20px;
}
see below image for output: Open the image in new window so you can see clearly.
Problem 1. You are trying to fit a horizontal Dock that has a maximum expanded width of 263px (7 48x48 icons) into a column that is only 191px wide: the Dock is going to overflow!
Problem 2. The template you are using is setting a specific width of 191px on any div more than 1 level below the div.module child of div#leftcolumn. Additionally, your template is specifiying both width and padding on some elements, which is going to cause cross-browser inconsistency and also makes some of the elements extend beyond the bounds of the column.
Since jqDock does not provide many ids on elements, the rules needed in order to override your template are going to have to be at least as 'specific' as the template's, if not more so.
For example, replace your page's rules for...
.sflpage {...}
.sflmenu {...}
#main_bg #leftcolumn div.module_menu div div div,
#main_bg #leftcolumn div.module div div {...}
with...
/*position the Dock's container, ensuring it's visible, and killing
the padding imposed by the template...*/
#leftcolumn div.module div div div div.sflpage {
padding: 0pt;
position: relative;
top: -20px;
width: auto;
z-index: 9999;
}
/*put the Dock in the center of its container, and give it plenty
of width for a fully-expanded Dock...*/
#leftcolumn div.module div div div div.jqDocked {
left: 50%;
margin-left: -150px;
padding: 0px 0pt;
position: absolute;
top: 0pt;
width: 300px;
}
/*kill the width and padding imposed by the template...*/
#leftcolumn div.module div div div div.jqDocked div {
width: auto;
padding: 0;
}
/*center the dock...*/
#leftcolumn div.module div div div div.jqDocked .jqDockWrap {
margin: 0pt auto;
}
/*use this to set/tweak the label's styling...*/
#leftcolumn div.module div div div div.jqDocked .jqDockLabelText {
}
I would also suggest that you need more horizontal space for the Dock (ie. between the module header and the file list), that your labels need better styling so that are visible and readable.
On my one page website at http://s361608839.websitehome.co.uk/pt-build/templatebuild/ if you click on a top menu option the page scrolls down to each section on the page.
Problem when it does scroll, the top part of the page is covering up the top part of the sections.
Is there anything I can do to my CSS to stop this from happening?
Thanks.
Replace some of your margin with padding. When jumping down the page to anchor spots like this it jumps to the edge of the inner box, outside of padding and inside border / margin. What you need to do is move that imaginary line up away from the content inside the div, so increase the padding and decrease some margin to keep the design working.
I did some playing around with your site, modifying to see how it would work for your trainingsessions section, I got this CSS:
margin-top: 0;
padding: 120px 350px 30px 0;
To adjust it with pure CSS, add an additional 151px (the height of your #topwrap element) to the padding-top of each navigable div. Then subtract 151px from the margin-bottom of each preceding navigable div.
A simplified version of this (you'll need to do the math to make it work with your already existing margins and paddings) would look like:
#div1 { /* first navigable div */
margin-bottom: -151px;
}
#div2 { /* all intermediate navigable divs */
padding-top: 151px;
margin-bottom: -151px;
}
#div3 { /* last navigable div */
padding-top: 151px;
}
Alternatively, you can adjust the scrolling position in the javascript by the 151px height of the #topwrap.
The site is appearing fine in Mozilla, Chrome, and IE6. But IE7 onwards, the menu background image was not appearing at all.
In the file moo.menu.css, I made the following changes in li:
.ry-cssmnu ul li {
margin: 0; /* all list items */
padding: 0;
float: left;
display: block;
background: url(../images/mainnav-bg.gif) repeat-x center top blue;/*added this line*/
cursor: pointer;}
After this, the background repeat is appearing only where the menu text is present.
http://bit.ly/ie8issue
The site is at: www.agmrcet.com/cons
Thanks in advance.
You have to declare a height to that container. Your floating list items are not giving their parent container height because float removes them from the document flow. Your <ul> has a current height of nothing, and the background image won't remedy that.
#mainnav { height:44px; ... }
First of all, I would change the CSS background property according to the CSS syntax:
background: blue url(../images/mainnav-bg.gif) repeat-x center top;
Looks like the problem is with your
<div class="clearfix" id="mainnav">
tag. Have you tried adding a pink border or something (to debug it) to the mainnav element and then setting a fixed width on it to make sure it goes the full width?
Here's the idea: I have a div element, #content_wrapper, which encompasses three floated divs, #left_column, #nav, and #content. Here's the styles on the #content_wrapper:
#content_wrapper {
float:left;
background: url("images/bg-tan.jpg") repeat-y left center;
position:relative;
}
However, in Internet Explorer 7 the #content_wrapper seems to steal the cursor from the child elements. Whenever I hover over the #content_wrapper, the cursor always switches to a beam and I'm unable to click on any of the links or text inside the div. Thoughts?
Update: I've tried the following fixes, none of which have worked.
Applying fixed width to all elements, including parent and top level children
Apply position: relative to all elements and then z-index
Using !important on all the above properties in case
Adding the "zoom" property to parent and child divs
Adding the "overflow" property to the parent div
#content_wrapper { position: relative; z-index: -1; width: 1010px; }
EDIT: You are setting the z-index of #content_wrapper to -1. This is why it's happening. Get rid of it or set it to a positive value.
Try
#content_wrapper {
zoom: 1
}