[css-d] need help with mobile navigation
I'm in the process of redesigning a site for a client. I added a side navigation for the main nav on smaller screens. One problem I'm having is that on mobile devices, the screen pushed over to the left and leaves space for the sliding side navigation even though its not engaged. It doesn't do this on desktop browsers with a small screen. Any ideas on what's causing this and how to fix it? Thanks. http://50f.d99.myftpupload.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] issue with responsive navigation
I'm working on a site with a responsive navigation that is horizontal on a small screen and collapses to a vertical sliding nav on smaller screens. This could be a minor issue, but when the screen resizes from small to larger, the navigation doesn't quite revert to its original state. Does anyone notice what I'm overlooking? http://50f.d99.myftpupload.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] issue with pop-out navigation
I'm trying to incorporate a pop-out navigation (from https://www.w3schools.com/howto/howto_js_sidenav.asp) to work with a wordpress-created navigation. The problem I'm having is getting the a links to show up within the ul and li. Here's the demo page I'm working with. What am I overlooking in order to get the links within the list to appear? http://greencrest.com/navtest.html click on "menu" in the upper left. thanks in advance. -chris __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] help with responsive navigation
Looks like I'm having hosting issues. The css file is updated (I can see the updates in the WP editor) but for some reason the site isn't refreshing the file. Thanks. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] help with responsive navigation
I'm reworking a client site navigation to work better responsively and
using a previous site as a model. I think I have the page code and css code
correct, but I'm not getting the correct results. In short, the menu is
collapsing when the screen is smaller but the link isn't toggling the menu,
and I can't figure out why. Here are links:
the site I'm working on:
http://ipegstl.com/commercial/
the site I'm trying to mimic:
http://otpnet.com/
here's the css code that works the button link for the toggling:
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: 'gandhi_sansbold';
text-decoration: none;
color: #fff;
background:#af292e;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
-webkit-appearance: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ .menu-menu-1-container #menu-menu-1 {
display: block;
}
@media only screen and (max-width : 1000px) {
/*Make dropdown links appear inline*/
#site-navigation ul {
position: static;
display: none;
}
/*Create vertical spacing*/
#site-navigation li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
#site-navigation ul li {
width: 100%;
}
#site-navigation li a {
width: 100%;
background:#af292e;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
What am I overlooking?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] question about css-only mobile responsive menu
I came across this blog post and demo for a css-only responsive menu and I've been playing with it to figure out the nuances of how it works. One problem I've run into is that when the demo screen is reduced, the menu appears as intended. I copied the file and css exactly as the demo page (I even did a strait save as), but when I reduce the screen (using the same browser as the demo), the menus won't appear when I click on the button link. I can't figure out why my local version isn't working. Does anyone have the same issue or know what I'm overlooking. blog post: http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/ demo: http://medialoot.com/preview/css-only-navigation-menu/index.html __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with responsive menu dropdown
Oh crap. I completely overlooked that. That solved the problem. Thanks
Philippe.
On Thu, May 21, 2015 at 12:24 AM, Philippe Wittenbergh e...@l-c-n.com
wrote:
Le 21 mai 2015 à 04:06, Chris Kavinsky ckavin...@gmail.com a écrit :
I'm trying to retrofit an existing site that's using a horizontal
navigation menu with dropdowns. The problem I'm having is getting the
menu
to appear on:click when the screen size is smaller. Its doing it entirely
using css. I created a static version before moving it to the wordpress
site, and it worked there. However, its not working on wordpress. Does
anything jump out to anyone as to what the problem is?
here's the model I grabbed the css code from:
http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
here's the live site I'm working on:
http://www.aircompressors.com/
Your “button”-link points to a #nav as target. However there is no element
with id=nav in your code, that I could find. Do you mean to point to the
element with ID=primary-navigation? if so, you should correct the “href” in
your button link to point to that (a href=primary-navigation), and then
make sure your stylesheet references that.
#primary-navigation:target { /* do something */ }
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] help with responsive menu dropdown
I'm trying to retrofit an existing site that's using a horizontal navigation menu with dropdowns. The problem I'm having is getting the menu to appear on:click when the screen size is smaller. Its doing it entirely using css. I created a static version before moving it to the wordpress site, and it worked there. However, its not working on wordpress. Does anything jump out to anyone as to what the problem is? here's the model I grabbed the css code from: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly here's the live site I'm working on: http://www.aircompressors.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] trouble with responsive horizontal menu
I'm trying to retrofit a client site to be responsive and running into an
issue with the navigation. I want the horizontal menu to collapse when
smaller and appear on-click but having issue getting the click to work.
Below is the live site and I've also included the css. What am I
overlooking?
http://www.aircompressors.com/
/* =Menu
-- */
#primary-navigation {
background: #005E9B;
display: block;
float: left;
margin: 0 auto;
width:100%;
max-width: 940px;
}
#primary-navigation .menu-main-navigation-container,
.menu {
font-size: 14px;
margin-left: 50px;
max-width: 928px;
}
#primary-navigation .menu-main-navigation-container ul,
.menu ul {
list-style: none;
margin: 0;
}
#primary-navigation .menu-main-navigation-container li,
.menu li {
float: left;
position: relative;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #005E9B;
text-align: center;
padding: 10px 0;
display: none;
}
#primary-navigation a {
color: #fff;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
#primary-navigation ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 9;
}
#primary-navigation ul ul li {
min-width: 180px;
}
#primary-navigation ul ul ul {
left: 100%;
top: 0;
}
#primary-navigation ul ul a {
background: #005e9b;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#primary-navigation li:hover a,
#primary-navigation ul ul :hover a {
background: #A82B44;
color: #fff;
}
#primary-navigation ul li:hover ul {
display: block;
}
#primary-navigation ul li.current_page_item a,
#primary-navigation ul li.current-menu-ancestor a,
#primary-navigation ul li.current-menu-item a,
#primary-navigation ul li.current-menu-parent a {
color: #fff;
}
* html #primary-navigation ul li.current_page_item a,
* html #primary-navigation ul li.current-menu-ancestor a,
* html #primary-navigation ul li.current-menu-item a,
* html #primary-navigation ul li.current-menu-parent a,
* html #primary-navigation ul li a:hover {
color: #fff;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
@media screen and (max-width : 870px){
/*Make dropdown links appear inline*/
#primary-navigation .menu-main-navigation-container ul,
.menu ul {
position: static;
display: none;
}
/*Create vertical spacing*/
#primary-navigation .menu-main-navigation-container li,
.menu li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
#primary-navigation .menu-main-navigation-container li,
.menu li, #primary-navigation a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] @font-face quirk
I added web fonts to a client site and noticed a quirk in Firefox. When I go to the page url the first time, the fonts don't appear properly. If I click to an interior page, and then click back to the home page via navigation, the fonts then work. Any idea why they don't load or recognize initially, and what I can do to fix it? It appears properly in Safari, and I haven't tested it in IE or Chrome yet. Here's the site: http://straitandlamp.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] need some help with IE8
I'm working on a site that looks good in all modern browsers but the home page is falling apart in IE8 and can't fiigure out why. Here's the link: http://www.greencrest.com/clients/ipeg/ The two small Vendor boxes should float to the right of the content area, but in IE8, they're dropping below it as if there's not enough room. It looks like the #content (pink area in IE) isn't allowing the nested elements to fit the full width, although there's no padding and margin in the CSS, and both the #content and .entry-content widths are set to fit the full length. Anyone have any idea what's going on? __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ipad quirks?
Not sure if this is an appropriate question or not for this group since this question most likely is a jquery issue and not a css one. I have a client claiming the slideshow on his home page isn't working properly when he views it on his ipad using both Safari and IE7. He says the photos don't cycle through, or when they do, he sometimes gets blank images. I'm thinking either the jquery or JS, or the images themselves aren't loading properly, or haven't fully loaded. They work fine in computer browsers. Unfortunately I don't have an ipad to test myself. Can anyone with an ipad check to see if they get the same result? Has anyone else had a similar experience regarding the ipad, and may have a good idea as to the cause? Here's the web site. http://www.integrityheatingair.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] strange color change in ipad
I'm working on a web site and the client just reviewed it using his ipad. For some reason, the ipad browser is rendering the phone number in both the header and footer in blue instead of white. Blue is the default hyperlink color, but neither are linked. I don't have an ipad to properly troubleshoot, so do any of you ipad users see the same thing? Does anyone have any idea what's causing the color change and how to fix it? Here's the site: http://www.integrityheatingair.com/ Any help would be greatly appreciated. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] help with positioning
I'm working on a new site where I used relative positioning to arrange the logo and nav horizontally. Consequently, there was a huge gap between the site header area and the content area because of the repositioning of the logo, so I moved the content up to fill the space (top:-115px). There's a graphic at the bottom of the content area (airplane shadow) that's supposed to sit atop the footer area. But due to the relative positioning, there's 115px of gap between where it sits and the footer area. Any suggestions on removing that space without wrapping the footer in another div with a background color and repositioning it -115px? I'm trying to not use another div wrapper if I don't have to. Here's the site in progress: http://associationdatabase.com/aws/OAA/pt/sp/home_page __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] two-column layout question
I'm working on a site that's a basic two-column layout, the larger on the left and the shorter on the right. I'm trying to set up the CSS to be responsive, but there's a couple of challenges I'm running into that I could use some help with. The right column has a 3rd-party plugin that uses a set width. I want the main column (left side) to fill the screen as the screen resizes until it hits about 600px wide. At that point the right side column should drop below the left main content. Normally, to solve the first situation (flex main column next to set width column), I would float the right column that has a fixed width. The problem with that is in the HTML, the side column would need to come first. But that then would place the side column above the main column when the screen size is below 600px. I've been trying to use relative positioning, but can't get the right column, which comes last in the HTML, to position up properly since the content in the main area (left) changes. Any suggestions on how to get the effect I'm looking for? Here's a link to the site: http://associationdatabase.com/aws/AEA/pt/sp/uid_home __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] trouble with @font-face
I'm having some issues getting @font-face to wok on a site and I'm sure I'm missing something simple. Its a static html site (for now) and got the font from fontsquirrel.com. I originally had the font files in a subdirectory and the stylesheets in another, so thought that was the problem. - I moved both the CSS and font files into the root, no luck - I tried both relative and absolute paths in the CSS to the font files, no luck - I cut and pasted the CSS code from the fontsquirrel-generated file, no luck Here's the link to the site. Hopefully someone can see what I'm obviously overlooking: http://integrityheatingair.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] help with centering floated list
Has anyone had any luck with being able to center a list that floats the list items so it can be horizontal? The only technique I was able to find required the css to use overflow:hidden, but that wouldn't work for the project I'm working on since the navigation could potentially use drop submenus, and the overflow would clip them. Here's the site I'm working on for reference: http://associationdatabase.com/aws/YBAA/pt/sp/home2 I thought of switching the items out of the list, but I'm also using the same items in the footer as a normal list, so would prefer to keep it as a list if possible. Thanks. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] @font-face issue in PC browsers
I'm working on a site using @font-face for font styling, and running into a problem with PC-based browsers (both IE and Firefox). For some reason, its choking on the @font-face css, and not only not rendering the fonts, but also killing the rest of the CSS. Anyone run into a similar problem and have any suggestions on what to do? Here's a link to the site: http://csbphotos.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] weird firefox bug?
A client just pointed something out to me on their site, and after an hour of messing with it, I figured out what was causing it. Basically, if you have a list item (same issue with both ol and ul lists) that is hyperlinked and also has a strong tag applied to it, and if the list item extends to a second line, Firefox will drop the marker for that list item. It seems to be a combination of all the above, because if I removed any of the three variables (strong, hyperlink, second line), the marker appears. There was absolutely nothing in the CSS that I could find that would do this, and its fine in all other browsers. I solved the issue by having the CSS apply the bold to any hyperlinked list item. Is anyone else aware of this weird behavior in Firefox, and is it indeed a bug? I couldn't find anything when I googled it. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] mobile css reference
Can anyone recommend a good mobile css reference? I'm trying to build a handheld css file for a site I'm working on and can't seem to get it to read properly. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] issue with suckerfish menu
I have a styled list for a site navigation I'm working on with a suckerfish dropdown menu. Below it I have an h1 tag with an image in it. I used a negative top with relative positioning to get the image/logo to creep into the nav bar. However, because of it, I can't get my mouse to hit the dropdown menu (using FIrefox). I tried adding a z-index to the list, but that didn't help. Any suggestions on how to get the overlap and the drops to work? Here's the links: http://associationdatabase.com/aws/OOA/pt/sp/home_eastwestconf __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] help with button background alignment
I'm having an alignment issue in Safari and Chrome with a button background and I can't figure out what's going on. Basically, in the site search in the upper right, I added a background image to the button and the search area is using a corner radius. In Safari and Chrome (Firefox renders it the way I want it to), the button pushes down about 10 pixels. I tried changing the margin in the search area and the button itself, but it didn't affect anything. I can't find anywhere in the css that's causing it. Anyone have an idea why its pushing down in the two browsers and how to fix it? Here's the site link: http://associationdatabase.com/aws/WCCA/pt/sp/Home_Page __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] help with a table wrapping around a float
I have a web page with a section of content floating to the right of the main content on the page. Within the main content is a table with a width set at 100% to fit the width of the page. The floated content comes first on the page so the main content will wrap around it, and it has a left margin set in the css. The text wraps the way I want it to, but the table is ignoring the float and overlapping the floated text and ignoring the left margin on the float. Any easy way to fix this without sticking the content into another div and floating it to the left so the table won't overlap the float? __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] issue with @font-face
Anyone savvy with working with @font-face? I'm trying to incorporate it on a
site and can't get it to work right. The problem is storing the font files
on one IP, and linking to it from another IP. I'm not sure if its just not
possible, or if I have the css code incorrect. Here's the original css:
@font-face {
font-family: 'JuveloRegular';
src: url('juvelo-webfont.eot');
src: url('juvelo-webfont.eot?#iefix') format('embedded-opentype'),
url('juvelo-webfont.woff') format('woff'),
url('juvelo-webfont.ttf') format('truetype'),
url('juvelo-webfont.svg#JuveloRegular') format('svg');
font-weight: normal;
font-style: normal;
}
this works fine when the files are in the same IP. Here's how I modified the
css to link from another site:
@font-face {
font-family: 'JuveloRegular';
src: url('http://209.235.208.145/fonts/juvelo-webfont.eot');
src: url('http://209.235.208.145/fonts/juvelo-webfont.eot?#iefix')
format('embedded-opentype'),
url('http://209.235.208.145/fonts/juvelo-webfont.woff') format('woff'),
url('http://209.235.208.145/fonts/juvelo-webfont.ttf')
format('truetype'),
url('http://209.235.208.145/fonts/juvelo-webfont.svg#JuveloRegular')
format('svg');
font-weight: normal;
font-style: normal;
}
Here's the beta site if it helps:
http://associationdatabase.com/aws/SESC/pt/sp/home_page
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] trouble getting a search form to line up properly
I'm having a constant issue come up and have yet for the life of me been able to figure it out, and thought someone in this group can help me out. I'm building a site that has a couple of links in the header area and want the site search to sit to the right of those links. However, the search form is dropping below the links. I've tried using a non-breaking space, wrapping it all in a tag, floating, not floating, etc. and can't get the damn thing to sit where I want. What am I overlooking? Here's the link to the site in progress: http://associationdatabase.com/aws/ASCAI/pt/sp/Home_Page __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] getting a horizontal list to float to the right
I'm working on a site with a horizontal navigation. Ideally, I would
like the list to float to the right side of the frame, but due to
applying float:left to the individual li items, I can't get it to work
properly. Am I doing something wrong, or is there a trick for this
without sieeting a specific width on the items?
Here's my css code for the nav:
ul#nav {
margin:0;
padding:0;
float:right;
text-align:right;
width:550px;
list-style:none;
}
#nav li {
margin:0;
padding:0;
font:italic normal 1.1em Georgia, Times New Roman, Times, serif;
display:block;
float:left; }
#nav li a {
color:#000;
text-decoration:none;
padding-left:15px;
text-align:right;
}
#nav li a:visited {
text-decoration:none;
color:#000;
}
#nav li a:hover {
text-decoration:none;
color:#be7734;
}
here's the live site for reference:
http://www.associationdatabase.com/aws/360/pt/sp/home_page
css file: http://209.235.212.107/screen.css
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] popup box getting cut off
Not sure how much of this is a css issue and what is a js/jquery issue. I'm using a jrquery calendar script to have event names display in a popup menu when you hover over a hyperlinked date. The problem is that the popup is getting restricted based on the parent calendar/table, hence cutting off information. Does anyone know how I can the the popup to show in its entirety when it breaks the space of the parent table? Here are some links: web page: http://associationdatabase.com/aws/OFCA/pt/sp/home_page css file: http://www.ohiofirechiefs.com/screen.css (calendar styles are at the very end) js/jquery file: http://www.tcslabs.com/scripts/jquery_calendar.js __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] floated list item not lining up horizontally
I created an unordered list where the background image displays in
place of text. For some reason, the list is staggering down a few
pixels from each other as you move to the right and I can't figure out
why. Here the link:
http://associationdatabase.com/aws/OHPCO/pt/sp/home_page
Here's the CSS code for the list (full CSS is here:
http://associationdatabase.com/aws/OHPCO/pt/css/css_screen.css) :
ul.networking {
list-style:none;
margin:0;
padding:15px 0;
overflow:hidden;
}
.homepage ul.networking {
padding:15px;
}
.networking li a {
padding:0;
display:block;
float:left;
margin:0 15px 5px 0;
height:32px;
text-indent:-999em;
}
.homepage .networking li a {
margin:0 15px 0 0;
}
a.twitter_hc {
background:transparent
url(http://www.ohpco.org/images/icon_twitter_homecare_blk.png) top
left no-repeat;
width:150px;
}
a.twitter_hpc {
background:transparent
url(http://www.ohpco.org/images/icon_twitter_hospice_blk.png) top left
no-repeat;
width:201px;
}
a.facebook {
background:transparent
url(http://www.ohpco.org/images/icon_facebook_blk.png) top left
no-repeat;
width:150px;
}
.homepage a.twitter_hc {
background:transparent
url(http://www.ohpco.org/images/icon_twitter_homecare.png) top left
no-repeat;
}
.homepage a.twitter_hpc {
background:transparent
url(http://www.ohpco.org/images/icon_twitter_hospice.png) top left
no-repeat;
}
.homepage a.facebook {
background:transparent
url(http://www.ohpco.org/images/icon_facebook.png) top left no-repeat;
}
'
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] removing input background color
I'm replacing the button for a search form with a background image.
The image is a transparent png file, and even though the
background-color is set to none, a light grey color is showing up.
Here's the CSS I'm using for it:
form input.search_button {
display:block;
background-color:none;
background-image:url(images/2009/button_search.png);
background-position:top left;
background-repeat:no-repeat;
width:55px;
height:28px;
border:none;
color:none;
}
form input.search_button:hover {
background-position:0 -18px;
}
Here's the link to the site:
http://associationdatabase.com/aws/OFDA/pt/sp/home_page
here's the link to the entire css file:
http://ohio-fda.org/screen.css
Am I overlooking something, and how do I get the background color to go away?
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] conflict with suckerfish dropdowns and SmoothGallery in IE7
Not sure how m,uch of this is a CSS issue, but my dropdown menus are hiding behind a SmoothGallery slideshow in IE7. It doesn't occur in Safari or Firefox. If I was using Flash, I can set the wmode to transparent, but not sure how to fix it with the JavaScript generated slideshow. Any help would be appreciated. URL: http://associationdatabase.com/aws/OSAE/pt/sp/Home_Page CSS: http://209.235.208.146/screen.css __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] problem with IE7, suckerfish and flash video
I'm running into a real poser and hopefully someone can help me out. I'm building a site using Son of Suckerfish dropdowns for the main navigation. One one page, I have a Flash video imbedded at the top of the content area where the dropdowns overlap. I added wmode=transparent to get the dropdowns from hiding behind the video, but now have run into a strange problem with IE7. The page initally displays fine, but when I hover over a nav item to activate a dropdown, IE7 hides the video and all content below (everything within the same div from the video to the end). I haven't the first clue what's going on. Anyone run into this before, and/or have an idea of how to get IE7 to behave? Here's the link: http://associationdatabase.com/aws/ORAEF/pt/sp/prostart_cafe CSS link: http://209.235.200.149/screen.css __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] issue with background images
I'm trying to build a horizontal nav bar that contains a rounded-corner background on both left and right on the top. I'm using two background images, one for each side. The container div has the right side for a backgorund, and the floated unordered list has the left for a background image. Initially, the ul background wasn't displaying. I added overflow:hidden to the ul, and that got the background image displaying, but then hid the container background in Firefox (v. 2 and 3 on both Mac and Windows). IE 7, however, still displays the background for the container, but not the list. I'm stuck in getting both background to display properly in both browsers. Any suggestions? Here are the links: CSS: http://209.235.218.13/screen.css test site: http://associationdatabase.com/aws/OAESA/pt/sp/Home_Page __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] conflict with suckerfish dropdowns and Flash in IE
That did it. I can be a dumbass sometimes. Thanks. On Thu, May 1, 2008 at 9:21 AM, vincent pollard [EMAIL PROTECTED] wrote: have you put wmode=transparent in the EMBED tag? that usually is what's missing. 2008/5/1 Chris Kavinsky [EMAIL PROTECTED]: I'm having trouble with an IE problem that I'm hoping someone here can help with. I'm building a site using suckerfish dropdowns on the navigation, and also using sIFR for the headlines, and have a rotating Flash using slideshow on the home page. The problem with IE is that the dropdown (far right menu item) is hiding behind the slideshow on the home page, and the sIFR headline on the interior pages. I added a z-index to the nav hoping that would fix it, but no luck. Any suggestions? web site: http://209.235.210.229/ CSS file: http://209.235.210.229/css/08styles.css __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Vincent Pollard http://www.ithinkx.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 problem with dropdowns
Good catch, Georg, and thanks. For some reason, the CMS was removing the second slash when it was adding the JS to the pages. I added the JS directly to the page (instead to the CMS doing it) and it resolved the problem. For those that asked, the CMS is custom built via Ruby on Rails. On Mon, Mar 24, 2008 at 6:10 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Chris Kavinsky wrote: Doing that, and it works fine on the static page. The problem, for some reason, is that it doesn't work on the page that's generated by the CMS (although the source code looks fine). I'm stumped. Fix the script. You've lost a backslash from the original. This line... this.className=this.className.replace(new RegExp( sfhover\b), ); ...must look like this... this.className=this.className.replace(new RegExp( sfhover\\b), ); ...in order to work. Otherwise the script will just keep adding 'sfhover' classes onmouseover, and not remove them onmouseout. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE7 problem with dropdowns
I having a very bizarre problem with suckerfish dropdowns and IE7. I have two versions of a page referencing the same CSS file -- one is a static page on the same server as the CSS file, the other generated by a CMS program on a different server. The problem is the dropdown menus are sticking in the CMS version, but the static version works fine. The CMS version is linking to the CSS properly, but seems to be ignoring bits of it. Can anyone see anything wrong that would be cauing this? References: static page: http://ecasite.org/2008template.html CMS page: http://associationdatabase.com/aws/ECA/pt/sp/p_Home_Page CSS file: http://209.235.241.60/css/styles2008.css __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 problem with dropdowns
Doing that, and it works fine on the static page. The problem, for some reason, is that it doesn't work on the page that's generated by the CMS (although the source code looks fine). I'm stumped. On Mon, Mar 24, 2008 at 4:34 PM, Vicki Stebbins [EMAIL PROTECTED] wrote: At 07:14 AM 25/03/2008, Chris Kavinsky wrote: I having a very bizarre problem with suckerfish dropdowns and IE7. I have two versions of a page referencing the same CSS file -- one is a static page on the same server as the CSS file, the other generated by a CMS program on a different server. The problem is the dropdown menus are sticking in the CMS version, but the static version works fine. The CMS version is linking to the CSS properly, but seems to be ignoring bits of it. Can anyone see anything wrong that would be cauing this? References: static page: http://ecasite.org/2008template.html CMS page: http://associationdatabase.com/aws/ECA/pt/sp/p_Home_Page CSS file: http://209.235.241.60/css/styles2008.css There's an issue with suckerfish and IE 7.0 with the menus sticking, this link may help. http://www.builtfromsource.com/2006/10/23/a-fix-for-suckerfish-dropdowns-in-ie-7/ Regards Vicki __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE problem with suckerfish dropdowns
I'm creating a navigation menu using Suckerfish Dropdowns with the main list items are centered within the li tags, and the dropdown items are aligned left. The desire is for the dropdown container to align left with the main list item. Firefox and Safari get it right, but IE (6 and 7) align the dropdown box in the center of the parent li tag. Anyone know a quick fix for this? Here's the links for reference: URL: http://209.235.208.145/cgi-bin/WebSuite/tcsAssnWebSuite.pl?AssnID=OHSOYDBCode=410110Action=DisplayTemplatePage=AWS_OHSOY2_osc_index.html CSS: http://209.235.214.238/css/2008OSC.css __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] dropdown menu issue with IE6
Sorry, I forgot to add the links to the site and CSS file. Here they are:
HTML page:
http://209.235.208.145/cgi-bin/WebSuite/tcsAssnWebSuite.pl?AssnID=OHSOYDBCode=410110Action=DisplayTemplatePage=AWS_OHSOY2_osc_index.html
CSS file: http://209.235.214.238/css/2008styles.css
On Tue, Feb 19, 2008 at 11:08 AM, Chris Kavinsky [EMAIL PROTECTED] wrote:
I've run into a real poser with using drop down menus and IE6 (real
surprise). Here's the scenario:
-I have two horizontal navigation areas using Son of Suckerfish dropdowns
-the 2nd area is also using background image replacement
-one page has a Flash file where the 2nd level dropdowns were getting
hidden even with a transparency setting on the Flash file (solved
using {position:relative;z-index: 999;} in the CSS)
-problem now is that the dropdown menu is pushed off to the far right
in IE6 (fixed if I remove the above additional CSS, but then back to
the original problem)
Personally, I would love to say screw IE6 users but I'm not in a
position to do that. Anyone have any suggestions on how to resolve the
above problem?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] dropdown menu issue with IE6
The dropdowns are there, but they're showing up off the screen to the
right. You should be able to see a portion of the About OSC
dropdown. The rest are off somewhere. IE7 works fine, as well as
Safari and FIrefox (Windows and Mac). With Firefox on the Mac, it
sometimes hides behind the Flash until you hover over it. Not
consistent, but annoying. Anyone know a fix for this as well, I'm all
ears.
On Thu, Feb 21, 2008 at 10:30 AM, Jeff Gates [EMAIL PROTECTED] wrote:
-I have two horizontal navigation areas using Son of Suckerfish dropdowns
-the 2nd area is also using background image replacement
-one page has a Flash file where the 2nd level dropdowns were getting
hidden even with a transparency setting on the Flash file (solved
using {position:relative;z-index: 999;} in the CSS)
-problem now is that the dropdown menu is pushed off to the far right
in IE6 (fixed if I remove the above additional CSS, but then back to
the original problem)
Personally, I would love to say screw IE6 users but I'm not in a
position to do that. Anyone have any suggestions on how to resolve the
above problem?
FYI, the dropdown menus are hidden under the flash when I view it on
Firefox 2 (Mac). And in my IE6, I'm not getting any dropdown menus.
Jeff
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] dropdown menu issue with IE6
I've run into a real poser with using drop down menus and IE6 (real
surprise). Here's the scenario:
-I have two horizontal navigation areas using Son of Suckerfish dropdowns
-the 2nd area is also using background image replacement
-one page has a Flash file where the 2nd level dropdowns were getting
hidden even with a transparency setting on the Flash file (solved
using {position:relative;z-index: 999;} in the CSS)
-problem now is that the dropdown menu is pushed off to the far right
in IE6 (fixed if I remove the above additional CSS, but then back to
the original problem)
Personally, I would love to say screw IE6 users but I'm not in a
position to do that. Anyone have any suggestions on how to resolve the
above problem?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] suckerfish dropdowns hiding behind graphics
That worked. Thanks.
On Jan 15, 2008 12:12 PM, Kevin Davison [EMAIL PROTECTED] wrote:
Chis, did you try this:
#nav {
position:relative;
z-index: 999;
}
(in addition to your other rules)
K
--
Quevin, LLC
Kevin Davison
Phone/Fax: 888.420.4571
Skype: kevinpdavison
Yahoo!IM: kevinpdavison
Quevin.com - Web Design, Development Production Solutions
__o
_`\,_
(*)/ (*)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] suckerfish dropdowns hiding behind graphics
I'm running into a problem using a combination of suckerfish dropdown menus and background image replacement w/ suckerfish dropdown menus. In a nutshell, I have 2 sets of horizontal navigations using suckerfish. The top is all text, the second is using image replacement. My problem is the top list dropdowns are hiding behind the navigation using the image replacement. Any ideas if there is an easy way to correct this? Web site for reference: http://soyohio.org/2008template.html CSS file: http://soyohio.org/css/2008styles.css __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
