Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Weird css issue in top navigation bar

CSS navigation bar

  • Please log in to reply
5 replies to this topic

#1 Roger

Roger

    Skadoosh!

  • Administrator
  • 1222 posts
  • Programming Language:C, PHP
  • Learning:Others

Posted 27 August 2012 - 04:27 PM

Need some help fixing a weird CSS problem here on CODECALL.

When I go to a Settings page: http://forum.codecal...o=user_activity , the top navigation tab "Settings" is highlighted in "white". When that happens, the dropdown menu is also whited out. This causes the display to look funny. Does anyone know how to fix this?

cc navi dropdown.png

I think this can be fix by just tweaking the CSS, but am not sure how.

Edited by Roger, 28 August 2012 - 10:11 AM.
Updated attachment to support download

  • 0

New around here? Click here to register and start participating in under a minute?

Or do a quick search and you may find the answer you're looking for.


#2 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 27 August 2012 - 10:20 PM

The text mainly looks a bit blurry due to the text shadow (see 3th code block). But text shadow may make it look smoother IF it has the right font-color.
Changing font-color will be the main thing to solve this I think (2nd code block).
Unless you don't like the white background at all (1st code block)


ipb_skingen.css @ 172
#primary_nav .active a {
background: white !important;
background-color: white !important;
....
}

promenu.css @ 17
#community_app_menu .submenu_container li > a {
...
color: #C5D5E2;
}


#community_app_menu .submenu_container li > a:hover,
#community_app_menu .submenu_container li > a.menu_active
{
background-color:#173455; /* Define your submenu background hover color here*/
color: #fff; /* Define your submenu font hover color here to blend with your new background color */
}


ipb_styles.css @478
media="screen, print"
#more_apps_menucontent a, .submenu_container a {
...
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}



(Your image doesn't seem to load if I click on it, it's available though, as I can manually go to http://uploads.codec...-1346020236.png)
  • 1

#3 Roger

Roger

    Skadoosh!

  • Administrator
  • 1222 posts
  • Programming Language:C, PHP
  • Learning:Others

Posted 28 August 2012 - 10:33 AM

Thanks for the explanation. CSS is not my forte.

I have also fixed the upload. I originally posted that image in a mod forum, so the permission must've stuck w/ the image. I re-uploaded the image so other can see and comment.
  • 0

New around here? Click here to register and start participating in under a minute?

Or do a quick search and you may find the answer you're looking for.


#4 Roger

Roger

    Skadoosh!

  • Administrator
  • 1222 posts
  • Programming Language:C, PHP
  • Learning:Others

Posted 05 September 2012 - 10:11 AM

Looks like the CSS is being overwritten by another css. For now, I've removed the offending menu.
  • 0

New around here? Click here to register and start participating in under a minute?

Or do a quick search and you may find the answer you're looking for.


#5 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 05 September 2012 - 11:03 AM

"!important" everywhere :D
  • 0

#6 Roger

Roger

    Skadoosh!

  • Administrator
  • 1222 posts
  • Programming Language:C, PHP
  • Learning:Others

Posted 05 September 2012 - 12:08 PM

Yes, I'm using IPBoard's default VSE (visual skin editor) and it generates all these "!important". Instead of trying to hack it up to look right, I'll just work around it for now. After we're all done w/ all the new functionality, we'll come back and address the skin again. Right now, it should be fine.
  • 0

New around here? Click here to register and start participating in under a minute?

Or do a quick search and you may find the answer you're looking for.






Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download