Related
so I have been starting out with React and built a website, with bootstrap too, now there is this contact form that I want to make work, therefor I am using express and nodejs to do so.
The website was working, I created a separate folder "server" which stores the server.js file and the package.json
However, after I installed and created this file, I ran it and the css stopped working. I did not change anything in my app.js or css file
import React, { Component } from 'react'
import Navigation from './components/navigation';
import Header from './components/header';
import Features from './components/features';
import About from './components/about';
import Services from './components/services';
import Gallery from './components/gallery';
import Contact from './components/contact';
import JsonData from './data/data.json';
export class App extends Component {
state = {
landingPageData: {},
}
getlandingPageData() {
this.setState({landingPageData : JsonData})
}
componentDidMount() {
this.getlandingPageData();
}
render() {
return (
<div>
<Navigation />
<Header data={this.state.landingPageData.Header} />
<Features data={this.state.landingPageData.Features} />
<About data={this.state.landingPageData.About} />
<Services data={this.state.landingPageData.Services} />
<Gallery />
<Contact data={this.state.landingPageData.Contact} />
</div>
)
}
}
export default App;
Here is my css:
body, html {
font-family: 'Open Sans', sans-serif;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
color: #252525;
font-weight: 400;
width: 100% !important;
height: 100% !important;
}
h2, h3, h4 {
font-family: 'Raleway', sans-serif;
}
h2 {
text-transform: uppercase;
margin: 0 0 20px 0;
font-weight: 800;
font-size: 36px;
color: #fff;
}
h3 {
font-size: 20px;
font-weight: 600;
color: #ddd;
}
h4 {
font-size: 18px;
color: #fff;
font-weight: 600;
}
h5 {
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
p {
font-size: 15px;
color: #fff;
}
p.intro {
margin: 12px 0 0;
line-height: 24px;
}
a {
color: #ff0000;
font-weight: 400;
}
a:hover, a:focus {
text-decoration: none;
color: #ff0000;
}
ul, ol {
list-style: none;
}
ul, ol {
padding: 0;
}
hr {
height: 2px;
width: 70px;
text-align: center;
position: relative;
background: #ff0000;
margin-bottom: 20px;
border: 0;
}
/* Navigation */
#menu {
transition: all 0.8s;
}
#menu.navbar-default {
background-color: #252525;
border-color: rgba(231, 231, 231, 0);
box-shadow: 0 0 10px rgba(0,0,0,0.15)
}
#menu a.navbar-brand h2{
font-family: 'Raleway', sans-serif;
font-size: 30px;
font-weight: 700;
margin-top: 1vh;
color: #fff;
text-transform: uppercase;
}
#menu.navbar-default .navbar-nav > li > a {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
color: #e3e3e3;
font-size: 15px;
font-weight: 400;
padding: 20px 2px;
border-radius: 0;
margin: 9px 20px 0 20px;
}
#menu.navbar-default .navbar-nav > li > a:after {
display: block;
position: absolute;
left: 0;
bottom: -1px;
width: 0;
height: 2px;
background: linear-gradient(to right, #ff0000 0%, #ff0000 100%);
content: "";
transition: width 0.2s;
}
#menu.navbar-default .navbar-nav > li > a:hover:after {
width: 100%;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
}
.navbar-default .navbar-nav > .active > a:after, .navbar-default .navbar-nav > .active > a:hover:after, .navbar-default .navbar-nav > .active > a:focus:after {
display: block !important;
position: absolute !important;
left: 0 !important;
bottom: -1px !important;
width: 100% !important;
height: 2px !important;
background: linear-gradient(to right, #ff0000 0%, #ff0000 100%) !important;
content: "" !important;
transition: width 0.2s !important;
}
.navbar-toggle {
border-radius: 0;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #252525;
border-color: #ff0000;
}
.navbar-default .navbar-toggle:hover>.icon-bar {
background-color: #ff0000;
}
.section-title {
margin-bottom: 70px;
}
.section-title h2 {
position: relative;
margin-top: 10px;
margin-bottom: 15px;
padding-bottom: 15px;
}
.section-title h2::after {
position: absolute;
content: "";
background: linear-gradient(to right, #ff4e4e 0%, #ff0000 100%);
height: 4px;
width: 60px;
bottom: 0;
margin-left: -30px;
left: 50%;
}
.section-title p {
font-size: 18px;
}
.btn-custom {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
color: #fff;
background-color: #ff0000;
background-image: linear-gradient(to right, #ff4e4e 0%, #ff0000 100%);
padding: 14px 34px;
letter-spacing: 1px;
margin: 0;
font-size: 15px;
font-weight: 500;
border-radius: 25px;
transition: all 0.5s linear;
border: 0;
}
.btn-custom:hover, .btn-custom:focus, .btn-custom.focus, .btn-custom:active, .btn-custom.active {
color: #fff;
background-image: none;
background-color: #ff0000;
}
.btn:active, .btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
a:focus, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
outline: none;
outline-offset: none;
}
/* Header Section */
.intro {
display: table;
width: 100%;
padding: 0;
background: url(../img/intro-bg.jpg) center center no-repeat;
background-color: #e5e5e5;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.intro .overlay {
background: rgba(0,0,0,0.2);
}
.intro h1 {
font-family: 'Raleway', sans-serif;
color: #fff;
font-size: 82px;
font-weight: 700;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 10px;
}
.intro h1 span {
font-weight: 800;
color: #ff0000;
}
.intro p {
color: #fff;
font-size: 22px;
font-weight: 300;
line-height: 30px;
margin: 0 auto;
margin-bottom: 60px;
}
header .intro-text {
padding-top: 350px;
padding-bottom: 200px;
text-align: center;
}
/* Features Section */
#features {
padding: 100px 0;
background: #252525;
}
#features i.fa {
font-size: 38px;
margin-bottom: 20px;
transition: all 0.5s;
color: #fff;
width: 100px;
height: 100px;
padding: 30px 0;
border-radius: 50%;
background: linear-gradient(to right, #6372ff 0%, #5ca9fb 100%);
box-shadow: 10px 10px 10px rgba(0,0,0,.05);
}
/* About Section */
#about {
padding: 100px 0;
background-color: #252525;
}
#about h3 {
font-size: 22px;
margin: 0 0 20px 0;
}
#about h2 {
position: relative;
margin-bottom: 15px;
padding-bottom: 15px;
}
#about h2::after {
position: absolute;
content: "";
background: linear-gradient(to right, #ff4e4e 0%, #ff0000 100%);
height: 4px;
width: 60px;
bottom: 0;
left: 0;
}
#about .about-text li {
margin-bottom: 6px;
margin-left: 6px;
list-style: none;
padding: 0;
color: #fff;
}
#about .about-text li:before {
content: '\f00c';
font-family: 'FontAwesome';
color: #ff0000;
font-size: 11px;
font-weight: 300;
padding-right: 8px;
}
#about img {
width: 520px;
margin-top: 10px;
background: #fff;
border-right: 0;
box-shadow: 0 0 50px rgba(0,0,0,0.06);
}
#about p {
line-height: 24px;
margin: 30px 0;
}
/* Services Section */
#services {
padding: 100px 0;
background: linear-gradient(to right, #252525 0%, #252525 100%);
color: #252525;
}
#services .service-desc {
margin: 10px 10px 20px;
}
#services h2 {
color: #fff;
}
#services .section-title h2::after {
position: absolute;
content: "";
background: #ff0000;
height: 4px;
width: 60px;
bottom: 0;
margin-left: -30px;
left: 50%;
}
#services i.fa {
font-size: 42px;
width: 120px;
height: 120px;
padding: 40px 0;
background: linear-gradient(to right, #6372ff 0%, #5ca9fb 100%);
border-radius: 50%;
color: #fff;
box-shadow: 10px 10px 10px rgba(0,0,0,.05);
}
#services h3 {
font-weight: 500;
padding: 5px 0;
color: #fff;
}
#services p {
color: rgba(255,255,255,.75);
}
#services .service-desc {
margin-bottom: 40px;
}
/* Portfolio Section */
#portfolio {
padding: 100px 0;
background-color: #252525;
}
.portfolio-item {
margin: 1px -15px 0 -14px;
padding: 0;
}
.portfolio-item .hover-bg {
overflow: hidden;
position: relative;
margin: 0;
}
.hover-bg .hover-text {
position: absolute;
text-align: center;
margin: 0 auto;
color: #fff;
background: linear-gradient(to right, #ff4e4e 0%, #ff0000 100%);
padding: 30% 0 0 0;
height: 100%;
width: 100%;
opacity: 0;
transition: all 0.5s;
}
.hover-bg .hover-text>h4 {
opacity: 0;
color: #fff;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: all 0.3s;
font-size: 18px;
letter-spacing: 1px;
font-weight: 500;
text-transform: uppercase;
}
.hover-bg:hover .hover-text>h4 {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.hover-bg:hover .hover-text {
opacity: 1;
}
/* Testimonials Section */
#testimonials {
padding: 100px 0;
background: #f6f6f6;
}
#testimonials i {
color: #e6e6e6;
font-size: 32px;
margin-bottom: 20px;
}
.testimonial {
position: relative;
padding: 20px;
}
.testimonial-image {
float: left;
margin-right: 15px;
}
.testimonial-image, .testimonial-image img {
display: block;
width: 64px;
height: 64px;
border-radius: 50%;
}
.testimonial-content {
position: relative;
overflow: hidden;
}
.testimonial-content p {
margin-bottom: 0;
font-size: 14px;
font-style: italic;
}
.testimonial-meta {
margin-top: 10px;
font-size: 15px;
font-weight: 600;
color: #666;
}
/* Team Section */
#team {
padding: 100px 0;
}
#team h4 {
margin: 5px 0;
}
#team .team-img {
width: 240px;
}
#team .thumbnail {
background: transparent;
border: 0;
}
#team .thumbnail .caption {
padding: 10px 0 0 0;
color: #888;
}
/* Contact Section */
#contact {
padding: 100px 0 60px 0;
background: linear-gradient(to right, #ff4e4e 0%, #ff4e4e 100%);
color: rgba(255,255,255,.75);
}
#contact .section-title {
margin-bottom: 40px;
}
#contact .section-title p {
font-size: 16px;
}
#contact h2 {
color: #fff;
margin-top: 10px;
margin-bottom: 15px;
padding-bottom: 15px;
}
#contact .section-title h2::after {
position: absolute;
content: "";
background: #fff;
height: 4px;
width: 60px;
bottom: 0;
left: 30px;
}
#contact h3 {
color: #fff;
margin-top: 80px;
margin-bottom: 25px;
padding-bottom: 20px;
font-weight: 400;
}
#contact form {
padding-top: 20px;
}
#contact .text-danger {
color: #cc0033;
text-align: left;
}
#contact .btn-custom {
margin: 30px 0;
background: transparent;
border: 2px solid #fff;
}
#contact .btn-custom:hover {
color: #1f386e;
background: #fff;
}
label {
font-size: 12px;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
float: left;
}
#contact .form-control {
display: block;
width: 100%;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857143;
color: #444;
background-color: #fff;
background-image: none;
border: 1px solid #ddd;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
#contact .form-control:focus {
border-color: #999;
outline: 0;
-webkit-box-shadow: transparent;
box-shadow: transparent;
}
.form-control::-webkit-input-placeholder {
color: #777;
}
.form-control:-moz-placeholder {
color: #777;
}
.form-control::-moz-placeholder {
color: #777;
}
.form-control:-ms-input-placeholder {
color: #777;
}
#contact .contact-item {
margin: 20px 0;
}
#contact .contact-item span {
color: rgba(255,255,255,1);
margin-bottom: 10px;
display: block;
}
#contact .contact-item i.fa {
margin-right: 10px;
}
#contact .social {
border-top: 1px solid rgba(255,255,255,0.15);
padding-top: 50px;
margin-top: 50px;
text-align: center;
}
#contact .social ul li {
display: inline-block;
margin: 0 20px;
}
#contact .social i.fa {
font-size: 22px;
width: 48px;
height: 48px;
padding: 12px 0;
border: 2px solid #fff;
color: #fff;
border-radius: 50%;
transition: all 0.3s;
}
#contact .social i.fa:hover {
color: #608dfd;
background: #fff;
}
/* Footer Section*/
#footer {
background: #ff4e4e;
padding: 30px 0;
}
#footer p {
color: #fff;
font-size: 14px;
}
#footer a {
color: #d3d3d3;
}
#footer a:hover {
border-bottom: 2px solid #608dfd;
}
#media (max-width: 768px) {
#about img {
margin: 50px 0;
}
#menu a.navbar-brand h2{
font-family: 'Raleway', sans-serif;
font-size: 30px;
font-weight: 700;
margin-bottom: 2vh;
color: #ffffff;
text-transform: uppercase;
}
}
#media (max-width: 960px) {
#menu a.navbar-brand h2{
font-family: 'Raleway', sans-serif;
font-size: 30px;
font-weight: 700;
color: #ffffff;
margin-top: -1vh;
text-transform: uppercase;
}
#menu.navbar-default .navbar-nav > li > a {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
color: #e3e3e3;
font-size: 12px;
font-weight: 400;
margin-bottom: 20px;
padding: 20px 2px;
border-radius: 0;
margin: 9px 20px 0 20px;
}
}
#media (max-width: 1200px) {
#menu a.navbar-brand h2{
font-family: 'Raleway', sans-serif;
font-size: 30px;
margin-top: 1vh;
font-weight: 700;
color: #ffffff;
text-transform: uppercase;
}
#menu.navbar-default .navbar-nav > li > a {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
color: #e3e3e3;
font-size: 12px;
font-weight: 400;
margin-bottom: 20px;
padding: 20px 2px;
border-radius: 0;
margin: 9px 20px 0 20px;
}
}
Btw, app.js is inside the src folder and the style.css is inside the public folder.
Thank you in advance for any help.
I can't figure out how to set a stylesheet to modify the QScrollBar in a QScrollArea.
I've first tried:
scrollarea = QScrollArea()
scrollarea.verticalScrollBar().setStyleSheet("""
QScrollBar:horizontal {
min-width: 240px;
height: 13px;
}
QScrollBar:vertical {
min-height: 240px;
width: 13px;
}
QScrollBar::groove {
background: gray;
border-radius: 5px;
}
QScrollBar::handle {
background: blue;
border-radius: 5px;
}
QScrollBar::handle:horizontal {
width: 25px;
}
QScrollBar::handle:vertical {
height: 25px;
}"""
# same for horizontalScrollBar
Then I tried applying the exact same stylesheet directly on the QScrollArea instance, with no success.
Then I tried to define the scrollbar myself :
scrollArea = QScrollArea(self)
verticalScrollBar = QScrollBar(qt.Qt.Vertical, scrollArea)
verticalScrollBar.setStyleSheet(my_stylesheet)
scrollArea.setVerticalScrollBar(verticalScrollBar)
But the exact same stylesheet works on a QSlider (by replacing QScrollBar with QSlider).
Try it:
import sys
from PyQt5.QtWidgets import QScrollBar, QDialog, QVBoxLayout, QApplication
from PyQt5.QtCore import Qt
class MainWindow(QDialog):
def __init__(self):
super().__init__()
self.createWidgets()
def createWidgets(self):
self.layout = QVBoxLayout(self)
self.scrollbar1 = QScrollBar(Qt.Vertical, self)
self.scrollbar2 = QScrollBar(Qt.Horizontal, self)
for widget in [self.scrollbar1, self.scrollbar2]:
widget.valueChanged.connect(self.test)
self.layout.addWidget(widget)
def test(self, event):
print(self.sender().value())
stylesheet = """
/* --------------------------------------- QScrollBar -----------------------------------*/
QScrollBar:horizontal
{
height: 15px;
margin: 3px 15px 3px 15px;
border: 1px transparent #2A2929;
border-radius: 4px;
background-color: yellow; /* #2A2929; */
}
QScrollBar::handle:horizontal
{
background-color: blue; /* #605F5F; */
min-width: 5px;
border-radius: 4px;
}
QScrollBar::add-line:horizontal
{
margin: 0px 3px 0px 3px;
border-image: url(:/qss_icons/rc/right_arrow_disabled.png);
width: 10px;
height: 10px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal
{
margin: 0px 3px 0px 3px;
border-image: url(:/qss_icons/rc/left_arrow_disabled.png);
height: 10px;
width: 10px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::add-line:horizontal:hover,QScrollBar::add-line:horizontal:on
{
border-image: url(:/qss_icons/rc/right_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal:hover, QScrollBar::sub-line:horizontal:on
{
border-image: url(:/qss_icons/rc/left_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:horizontal, QScrollBar::down-arrow:horizontal
{
background: none;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal
{
background: none;
}
QScrollBar:vertical
{
background-color: #2A2929;
width: 15px;
margin: 15px 3px 15px 3px;
border: 1px transparent #2A2929;
border-radius: 4px;
}
QScrollBar::handle:vertical
{
background-color: red; /* #605F5F; */
min-height: 5px;
border-radius: 4px;
}
QScrollBar::sub-line:vertical
{
margin: 3px 0px 3px 0px;
border-image: url(:/qss_icons/rc/up_arrow_disabled.png);
height: 10px;
width: 10px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical
{
margin: 3px 0px 3px 0px;
border-image: url(:/qss_icons/rc/down_arrow_disabled.png);
height: 10px;
width: 10px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical:hover,QScrollBar::sub-line:vertical:on
{
border-image: url(:/qss_icons/rc/up_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical:hover, QScrollBar::add-line:vertical:on
{
border-image: url(:/qss_icons/rc/down_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical
{
background: none;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical
{
background: none;
}
"""
if __name__ == '__main__':
app = QApplication(sys.argv)
app.setStyleSheet(stylesheet) # <----
GUI = MainWindow()
GUI.resize(300, 200)
GUI.show()
sys.exit(app.exec_())
Update
Upload images from a resource file.
This way is to convert
the res.qrc file in the res_rc.py file through the pyrcc5 file,
which can be directly loaded by import.
In a directory, for example images were put images: right_arrow.png, ...
Created a file such as stylesheet.qrc:
<RCC>
<qresource prefix="/">
<file>images/down_arrow.png</file>
<file>images/down_arrow_disabled.png</file>
<file>images/up_arrow.png</file>
<file>images/up_arrow_disabled.png</file>
<file>images/left_arrow.png</file>
<file>images/left_arrow_disabled.png</file>
<file>images/right_arrow.png</file>
<file>images/right_arrow_disabled.png</file>
</qresource>
</RCC>
Convert stylesheet.qrc to stylesheet_rc.py
pyrcc5 stylesheet.qrc -o stylesheet_rc.py
Paste into main.py - import stylesheet_rc
Transfer the modules main.py and stylesheet_rc.py to some other directory and run main.py
main.py
import sys
from PyQt5.QtWidgets import QScrollBar, QDialog, QVBoxLayout, QApplication
from PyQt5.QtCore import Qt
import stylesheet_rc # <--------
class MainWindow(QDialog):
def __init__(self):
super().__init__()
self.createWidgets()
def createWidgets(self):
self.layout = QVBoxLayout(self)
self.scrollbar1 = QScrollBar(Qt.Vertical, self)
self.scrollbar2 = QScrollBar(Qt.Horizontal, self)
for widget in [self.scrollbar1, self.scrollbar2]:
widget.valueChanged.connect(self.test)
self.layout.addWidget(widget)
def test(self, event):
print(self.sender().value())
stylesheet = """
/* --------------------------------------- QScrollBar -----------------------------------*/
QScrollBar:horizontal
{
height: 15px;
margin: 3px 15px 3px 15px;
border: 1px transparent #2A2929;
border-radius: 4px;
background-color: yellow; /* #2A2929; */
}
QScrollBar::handle:horizontal
{
background-color: blue; /* #605F5F; */
min-width: 5px;
border-radius: 4px;
}
QScrollBar::add-line:horizontal
{
margin: 0px 3px 0px 3px;
border-image: url(:/images/right_arrow_disabled.png); /* # <-------- */
width: 10px;
height: 10px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal
{
margin: 0px 3px 0px 3px;
border-image: url(:/images/left_arrow_disabled.png); /* # <-------- */
height: 10px;
width: 10px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::add-line:horizontal:hover,QScrollBar::add-line:horizontal:on
{
border-image: url(:/images/right_arrow.png); /* # <-------- */
height: 10px;
width: 10px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal:hover, QScrollBar::sub-line:horizontal:on
{
border-image: url(:/images/left_arrow.png); /* # <-------- */
height: 10px;
width: 10px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:horizontal, QScrollBar::down-arrow:horizontal
{
background: none;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal
{
background: none;
}
QScrollBar:vertical
{
background-color: #2A2929;
width: 15px;
margin: 15px 3px 15px 3px;
border: 1px transparent #2A2929;
border-radius: 4px;
}
QScrollBar::handle:vertical
{
background-color: red; /* #605F5F; */
min-height: 5px;
border-radius: 4px;
}
QScrollBar::sub-line:vertical
{
margin: 3px 0px 3px 0px;
border-image: url(:/images/up_arrow_disabled.png); /* # <-------- */
height: 10px;
width: 10px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical
{
margin: 3px 0px 3px 0px;
border-image: url(:/images/down_arrow_disabled.png); /* # <-------- */
height: 10px;
width: 10px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical:hover,QScrollBar::sub-line:vertical:on
{
border-image: url(:/images/up_arrow.png); /* # <-------- */
height: 10px;
width: 10px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical:hover, QScrollBar::add-line:vertical:on
{
border-image: url(:/images/down_arrow.png); /* # <-------- */
height: 10px;
width: 10px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical
{
background: none;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical
{
background: none;
}
"""
if __name__ == '__main__':
app = QApplication(sys.argv)
app.setStyleSheet(stylesheet) # <----
GUI = MainWindow()
GUI.resize(300, 200)
GUI.show()
sys.exit(app.exec_())
My problem was that the stylesheet for QSlider and QScrollBar have sligthly different syntaxes.
My eventual solution is (to be set either as the QScrollArea stylesheet or as the QApplication stylesheet, depending on the desired scope):
stylesheet = """
QScrollArea {
border: none;
}
QScrollBar {
background: gray;
border-radius: 5px;
}
QScrollBar:horizontal {
height: 13px;
}
QScrollBar:vertical {
width: 13px;
}
QScrollBar::handle {
background: green;
border-radius: 5px;
}
QScrollBar::handle:horizontal {
height: 25px;
min-width: 10px;
}
QScrollBar::handle:vertical {
width: 25px;
min-height: 10px;
}
QScrollBar::add-line {
border: none;
background: none;
}
QScrollBar::sub-line {
border: none;
background: none;
}
"""
I'm making a chrome extension, and I need to make an infinite while loop in it, but whenever the while loop starts, the browser tab crashes. Is there any solution or other method I could use?
Why do you need an infinite loop? What are you trying to achieve?
There are other options like window.requestAnimationFrame(), setInterval or setTimeout that you could use inside a page to continuously do something without blocking it. For example:
const counterElement = document.getElementById('counter');
let counterValue = 0;
setInterval(() => {
counterElement.innerText = (++counterValue / 100).toFixed(2);
}, 10);
body {
margin: 48px 8px 8px;
font-family: monospace;
}
#counter {
position: fixed;
top: 0;
left: 0;
width: 100%;
line-height: 32px;
padding: 0 8px;
background: black;
color: white;
}
hr {
border: none;
border-top: 2px solid black;
margin: 32px 0;
}
button {
border: 2px solid black;
background: transparent;
padding: 8px 12px;
font-family: monospace;
cursor: pointer;
outline: none;
}
button:hover {
background: yellow;
}
button:active {
background: black;
color: white;
}
button:focus {
border: 3px solid black;
padding: 7px 11px;
}
<div id="counter">0</div>
Click around the page. See how everything still works?
<hr />
<button>BUTTON</button>
<button>BUTTON</button>
You could also consider a Web Worker depending on your needs.
Please observe this stylesheet: http://jsfiddle.net/VjhJ4/12/
If you hover your mouse over the anchored menu, you will see that there is a grey/white-ish shadow to the text. Where can I change that shadow color? I have searched the stylesheet everywhere without any succeed, but surely it must be hiding there somewhere.
I will paste the stylesheet here as well (although I advice checking the fiddle):
/*------------------------------------------------*/
/*-----------------[RESET]------------------------*/
/*------------------------------------------------*/
.dd12:hover{
background:#f00 !important;
}
.dd13:hover{
background:green !important;
}
.dd14:hover{
background:blue!important;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; }
/* remember to define focus styles! */
:focus { outline: 0; }
/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
/*------------------------------------------------*/
/*-----------------[BASIC STYLES]-----------------*/
/*------------------------------------------------*/
body { line-height: 20px; font-family:'Droid Sans',Arial,Verdana,sans-serif; font-size: 12px; color: #48423f; background: url(images/header-bg.png); text-shadow: 1px 1px 0 #fff; }
a { text-decoration: none; color: #00b7f3; }
a:hover { text-decoration: underline; }
.clear { clear: both; }
.ui-tabs-hide { display: none; }
br.clear { margin: 0px; padding: 0px; }
h1, h2, h3, h4, h5, h6 { padding-bottom: 5px; color: #48423F; letter-spacing: -1px; line-height: 1em; font-weight: normal; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #48423F; }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p { padding-bottom: 10px; line-height: 24px; }
strong { font-weight: bold; color: #1c1c1c; }
cite, em, i { font-style: italic; }
pre, code { font-family: Courier New, monospace; margin-bottom: 10px; }
ins { text-decoration: none; }
sup, sub { height: 0; line-height: 1; position: relative; vertical-align: baseline; }
sup { bottom: 0.8em; }
sub { top: 0.3em; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd { margin-left: 1.5em;}
blockquote { margin: 1.5em; padding: 1em; color: #666666; background: #e6e6e6; font-style: italic; border: 1px solid #dcdcdc; }
blockquote p { padding-bottom: 0px; }
input[type=text],input.text, input.title, textarea, select { background-color:#fff; border:1px solid #bbb; padding: 2px; color: #4e4e4e; }
input[type=text]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus { border-color:#2D3940; color: #3e3e3e; }
input[type=text], input.text, input.title, textarea, select { margin:0.5em 0; }
textarea { padding: 4px; }
img#about-image { float: left; margin: 3px 8px 8px 0px; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
/*------------------------------------------------*/
/*---------------[MAIN LAYOUT INFO]---------------*/
/*------------------------------------------------*/
#top-header { border-bottom: 2px solid #ffffff; position: relative; background: url(images/header-bg.png); }
#top-header .container { min-height: 46px; }
#top-shadow { background: url(images/top-shadow.png) repeat-x; width: 100%; position: absolute; top: 0px; left: 0px; height: 7px; }
#bottom-shadow { background: url(images/bottom-shadow.png) repeat-x; width: 100%; position: absolute; bottom: 0px; left: 0px; height: 4px; }
.container { text-align: left; margin: 0 auto; width: 960px; position: relative; }
#content { margin-bottom: 39px; }
ul#top-menu { float: left; padding-left: 36px; }
#search-form { float: right; background: url(images/search-bg.png) no-repeat; width: 167px; height: 27px; padding-right: 48px; margin-top: 11px; }
#search-form #searchinput { background: none; border: none; float: left; margin: 5px 7px 0 5px; width: 116px; padding-left: 9px; font-size: 11px; color: #6f6967; }
#search-form #searchsubmit { margin-top: 7px; margin-right: 7px; }
#content-area { background: #fafcfc url(images/content-area-bg.png); border-bottom: 1px solid #ffffff; }
#top-stitch { background: url(images/top-stich.png) repeat-x bottom left; height: 7px; }
#content-area .container { padding-top: 51px; }
#logo-area { text-align: center; position: relative; padding-bottom: 37px; }
p#slogan { font-size: 15px; font-family: 'Kreon', Arial, sans-serif; color: #9aa4a4; text-transform: uppercase; text-shadow: 1px 1px 1px #ffffff; }
#content { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #e2e5e5; }
#content-shadow { background: url(images/content-main-shadow.png) repeat-y; }
#content-top-shadow { background: url(images/content-top-shadow.png) repeat-x 0 1px; }
#content-bottom-shadow { background: url(images/content-bottom-shadow.png) repeat-x bottom left; }
#inner-border { border: 1px solid #ffffff; background: #fff url(images/content-bg.png); /*height: 100%;*/ }
#inner-border, #content-shadow, #content-top-shadow, #content-bottom-shadow { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
#second-menu { background: url(images/menu-bottom-bg.png) repeat-x bottom left; }
ul#secondary-menu { padding-left: 29px; margin-top:-1px; }
#controllers { margin-bottom: 27px; margin-left: 23px; position: relative; }
#controllers #active_item { background: url(images/featured-arrow.png) no-repeat; position: absolute; top: -30px; left: 36px; width: 20px; height: 10px; z-index: 100; }
.controller { display:block; float:left; position:relative; margin-right: 21px; }
.controller a { display: block; }
.controller a.active { -moz-box-shadow: 0 0 6px 2px rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 6px 2px rgba(0,0,0,0.4); box-shadow: 0 0 6px 2px rgba(0,0,0,0.4); }
.controller span.overlay { background:url(images/controller-overlay.png) no-repeat; display:block; height:54px; left:0px; position:absolute; top:0px; width:95px; }
.recent-from { float: left; width: 317px; }
.recent-middle { width: 318px !important; }
.recent-last { width: 321px !important; }
.recent-last .recent-content { background: none !important; }
.main-title { background:url(images/title-bg.png) repeat-x; height: 42px; line-height: 42px; font-size: 13px !important; text-transform: uppercase; color: #48423f; text-shadow: 1px 1px 1px #ffffff; font-weight: bold; text-align: center; padding-bottom: 0; font-family: 'Droid Sans',Arial,Verdana,sans-serif !important; }
#comment-wrap .main-title { margin: 0 -37px 12px -39px; }
.recent-content { background:url(images/recent-content-bg.png) repeat-y top right;margin-top: -1px; padding: 29px 32px 38px 35px; }
.last { background: none; }
.block-post { margin-bottom: 7px; }
.block-post .thumb { display:block; float:left; position:relative; margin-right: 17px; }
.block-post .thumb span.overlay { background:url(images/post-overlay.png) no-repeat; display:block; height:41px; left:0px; position:absolute; top:0px; width:41px; }
.block-post h3.title { font-family: 'Kreon', Arial, sans-serif; font-size: 16px; text-shadow: 1px 1px 1px #ffffff; }
.block-post h3.title a { text-decoration: none; color: #48423f; }
.block-post p.meta-info { color: #b8c2c2; text-shadow: 1px 1px 1px #ffffff; margin-top: -4px; }
.block-post p.meta-info a { text-decoration: none; color: #8c9c9c; }
.block-post p.meta-info a:hover { color: #444c4c; }
a.more { background:url(images/more.png) no-repeat right bottom; color:#8c9c9c; display:block; text-shadow: 1px 1px 1px #ffffff; padding-right:6px; text-decoration:none; height: 35px; line-height: 35px; margin-left: 16%; margin-right: 16%; text-align: center;}
a.more:hover { color:#111111; }
a.more span { background:url(images/more.png) no-repeat; display:block; height: 35px; padding-left: 6px; }
.post a.more { float: right; margin-left: 0; margin-right: 0; }
.post a.more span { padding-left: 12px; padding-right: 4px; }
#left-area { float: left; width: 634px; }
#sidebar { float: left; width: 322px; }
#entries { background:url(images/recent-content-bg.png) repeat-y 633px 0px; padding: 31px 38px 27px; }
.entry { margin-bottom: 10px; }
.entry .thumb, .photostream .thumb { display:block; float:left; position:relative; margin-right: 14px; margin-top: 5px; }
.photostream .thumb { margin-right: 9px; margin-bottom: 9px; }
.entry .thumb span.overlay, .photostream .thumb span.overlay { background:url(images/entry-overlay.png) no-repeat; display:block; height:68px; left:0px; position:absolute; top:0px; width:68px; }
.photostream .thumb span.overlay { background:url(images/entry-overlay.png) no-repeat !important; height:68px !important; width:68px !important; }
.latest .thumb span.overlay, body.single .thumb span.overlay, body.page .thumb span.overlay { background:url(images/single-overlay.png) no-repeat !important; width: 201px; height: 201px; }
.entry h3.title, h1.title { font-family: 'Kreon', Arial, sans-serif; font-size: 20px; text-shadow: 1px 1px 1px #ffffff; }
h1.title { color: #48423f; font-size: 30px; }
.entry h3.title a { text-decoration: none; color: #48423f; }
.entry p.meta-info { color: #b8c2c2; text-shadow: 1px 1px 1px #ffffff; margin-top: -2px; margin-bottom: -8px; }
.entry p.meta-info a { text-decoration: none; color: #8c9c9c; }
.entry p.meta-info a:hover { color: #444c4c; }
.entry div.post-meta { background: url(images/meta-separator.png) repeat-x; margin: 8px 0 14px; }
.entry div.post-meta p.meta-info { background: url(images/meta-separator.png) repeat-x bottom left; margin-bottom: 10px; padding: 6px 0 8px; }
.latest .thumb { display:block; float:left; position:relative; margin-right: 28px; }
.latest .thumb span.overlay { background:url(images/entry-latest-overlay.png) no-repeat !important; display:block; height:131px; left:0px; position:absolute; top:0px; width:131px; }
.latest h3.title { font-family: 'Kreon', Arial, sans-serif; font-size: 24px; text-shadow: 1px 1px 1px #ffffff; }
.latest h3.title a { text-decoration: none; color: #48423f; }
.latest p.meta-info { color: #b8c2c2; text-shadow: 1px 1px 1px #ffffff; margin-top: -2px; margin-bottom: -8px; }
.latest p.meta-info a { text-decoration: none; color: #8c9c9c; }
.latest p.meta-info a:hover { color: #444c4c; }
a.read-more { float: right; color:#b8c2c2; text-shadow: 1px 1px 1px #ffffff; text-decoration:none; }
a.read-more:hover { color:#111111; }
.blog-entry { position: relative; width: 248px; padding-left: 32px; }
a.comments { background:url(images/comments-cloud.png) no-repeat; position: absolute; top: 0px; left: 0px; width: 37px; height: 33px; font-weight: bold; color:#48423f; text-decoration: none; padding: 4px 0; text-align: center; }
.blog-entry h4.title { padding-left: 25px; padding-right: 33px; font-family: 'Kreon', Arial, sans-serif; font-size: 16px; color:#48423f; text-shadow: 1px 1px 1px #ffffff; }
.blog-entry p.meta-info { padding-left: 25px; padding-right: 33px; color:#b8c2c2; text-shadow: 1px 1px 1px #ffffff; margin-top: -2px; }
.blog-entry p.meta-info a { text-decoration: none; color: #8c9c9c; }
.blog-entry p.meta-info a:hover { color: #444c4c; }
#ad-720 { text-align: center; padding-bottom: 32px; }
#bottom-stitch { background: url(images/top-stich.png) repeat-x bottom left; height: 7px; margin-bottom: 4px; }
#breadcrumbs { background: url("images/title-bg.png") repeat-x; height: 42px; line-height: 42px; padding-left: 38px; }
#breadcrumbs a { color: #b9c5c5; }
#breadcrumbs, #breadcrumbs a:hover { color: #929e9e; text-decoration: none; }
#main-content { position: relative; }
#index-top-shadow { background: url("images/content-top-shadow.png") repeat-x scroll 0 1px; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-top: 1px solid #dee0e0; }
.post ul, .comment-content ul { list-style-type: disc; padding: 10px 0px 10px 20px; }
.post ol, .comment-content ol { list-style-type: decimal; list-style-position: inside; padding: 10px 0px 10px 2px; }
.post ul li ul, .post ul li ol, .comment-content ul li ul, .comment-content ul li ol { padding: 2px 0px 2px 20px; }
.post ol li ul, .post ol li ol, .comment-content ol li ul, .comment-content ol li ol { padding: 2px 0px 2px 35px; }
.fullwidth #left-area { width: 100%; }
.fullwidth #entries { background: none; }
body.page h1.title { margin-bottom: 8px; }
.ad-468 { text-align: center; margin-bottom: 30px; }
.ad-bottom { margin-top: 35px; margin-bottom: 6px; }
/*------------------------------------------------*/
/*---------------[DROPDOWN MENU]------------------*/
/*------------------------------------------------*/
ul#top-menu li { padding-right: 2px; background: url(images/menu-bg.png) repeat-y top right; }
ul#top-menu a { font-size: 11px; color: #ffffff; text-decoration: none; text-transform: uppercase; font-weight: bold; text-shadow: 1px 1px 1px rgba(0,0,0,0.7); padding: 16px 12px 10px; }
ul#top-menu a:hover { color: #ebbe5e;}
ul#top-menu > li.current_page_item > a { color: #ebbe5e !important; }
ul#top-menu li ul, #mobile_menu { width: 170px !important; padding: 0; background: #161616 url(images/header-bg.png); top: 45px !important; -moz-box-shadow:3px 3px 7px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border-top-left-radius: 0px;-moz-border-radius-topleft: 0px; border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; z-index: 9999px; display: none; }
ul#top-menu ul li, #mobile_menu li a { margin: 0 !important; padding: 10px 7px 10px 25px !important; background: url(images/top-menu-separator.png) repeat-x; }
ul#top-menu ul li.first-item { background: none; }
ul#top-menu ul li a, #mobile_menu a { padding: 0 !important; width: 138px; }
ul#top-menu li:hover ul ul, ul#top-menu li.sfHover ul ul { top: -1px !important; left: 171px !important; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
ul#top-menu li.menu-gradient { background: url("images/top-shadow.png") repeat-x; position: absolute; top: 0; left: 0; width: 202px; height: 7px !important; }
ul#secondary-menu li { padding-right: 2px; background: url(images/secondary-menu-bg.png) repeat-y top right; }
ul#secondary-menu a { font-size: 13px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px; }
ul#secondary-menu a:hover { color: #000000;}
ul#secondary-menu > li.current_page_item > a { color: #919e9e !important; }
ul#secondary-menu li ul, #category_mobile_menu { width: 360px !important; padding: 7px 0 10px; background: #fff url(images/content-bg.png); top: 55px !important; -moz-box-shadow:3px 3px 7px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border-top-left-radius: 0px;-moz-border-radius-topleft: 0px; border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; z-index: 9999px; display: none; }
ul#secondary-menu ul li, #category_mobile_menu li a { margin: 0 !important; padding: 8px 0 8px 30px !important; width: 150px; float: left; }
ul#secondary-menu ul li a, #category_mobile_menu a { padding: 0 !important; }
ul#secondary-menu li:hover ul ul, ul#secondary-menu li.sfHover ul ul { top: -8px !important; left: 180px !important; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
ul#secondary-menu ul li.even-item { background: none; }
Can you find it?
it's here - first rule in [BASIC STYLES]
body {
line-height: 20px;
font-family:'Droid Sans',Arial,Verdana,sans-serif;
font-size: 12px;
color: #48423f;
background: url(images/header-bg.png);
text-shadow: 1px 1px 0 #fff; /* remove this */
}
hoping one of you guys can help me please.
I have a basic list menu with two dropdowns. This all works fine on all browsers except IE6 and IE7. Please take a look at my markup.
<nav>
<ul id="topNav"
><li id="topNavFirst">About Us</li
><li id="topNavSecond"><a href="../people/our-people.php" id="peopleNav">Our People</a
><ul id="subList1"><li>Mike Hadfield</li
><li>Karen Sampson</li
><li>Milhana Farook</li
><li>Kim Crook</li
><li>Amanda Lynch</li
><li>Gideon Scott</li
><li>Paul Fuller</li
><li>Peter Chaplain</li
><li>Laura Hutley</li
></ul
></li
><li id="topNavThird"><a href="../services/our-services.php" id="servicesNav">Our Services</a
><ul id="subList2"><li>Company & Commercial</li
><li>Employment</li
><li>Civil Litigation</li
><li>Debt Recovery</li
><li>Conveyancing</li
><li>Commerical Property</li
><li>Wills & Probate</li
><li>Matrimonial & Family</li
></ul
></li
><li>News</li
><li>Careers</li
><li>Contact</li
></ul><!-- /topNav -->
</nav>
and the css
a {text-decoration:none;}
#topNav {
float:right;
height:30px;
margin:0;
font-size:12px;
}
#topNav li {
display:inline;
float:left;
list-style:none;
color:#666;
border-left: 1px solid #666;
padding: 0 3px 0 3px;
position:relative;
}
#topNav ul a {
white-space:nowrap;
}
#topNav li a:hover {
border-bottom:2px solid #369;
}
#topNavSecond a:hover {
border-bottom:2px solid transparent !important;
}
#topNavFirst {
border-left: 1px solid transparent !important;
}
/*****OUR-PEOPLE DROPDOWN*****/
#topNav ul{
background:#fff;
border:1px solid #666;
border-top:0px solid transparent;
border-bottom:2px solid #666;
list-style:none;
position:absolute;
left:-9999px;
width:100px;
text-align:left;
padding:5px 0 5px 0px;
margin:0 0 0 -4px;
z-index:10;
-webkit-box-shadow: 1px 1px 1px #666;
-moz-box-shadow: 1px 1px 1px #666;
box-shadow: 1px 1px 1px #666;
vertical-align: bottom;
}
#topNav ul li{
display:block;
border-left:0px;
margin-bottom: 0px;
padding:0;
vertical-align: bottom;
}
#topNav ul a{
padding:0 0 0 5px;
}
#topNav li:hover ul{
left:auto;
}
#topNav li:hover a {
color:#369;
}
#topNav li:hover ul a{
text-decoration:none;
color:#666;
}
#topNav li:hover ul li a:hover{
color:#fff;;
width:100%;
border-bottom:0px solid transparent !important;
}
#topNav ul li:hover {
background:#369;
display: block;
}
#topNav ul li a {
display: block;
padding:0 0 0 4px;
}
/************/
/*****OUR-SERVICES DROPDOWN*****/
#topNavThird a:hover {
border-bottom:2px solid transparent !important;
}
#topNavThird ul{
/*background:#fff url(images/service-ul-bg.png) no-repeat;*/
width:135px !important;
/*margin-left:120px !important;*/
}
script
jQuery(document).ready(function () {
$('#subList1').css("display", "none");
$('#topNavSecond').hover(function () {
$('#subList1').stop(true, true).fadeIn('400');
},
function(){
$('#subList1').stop(true, true).fadeOut('400');
});
$('#subList2').css("display", "none");
$('#topNavThird').hover(function () {
$('#subList2').stop(true, true).fadeIn('400');
},
function(){
$('#subList2').stop(true, true).fadeOut('400');
});
});
here it is working perfectly
http://jsfiddle.net/BcWd9/6/
here is a screen shot of how it looks in IE7.
hadfield.andymcnallydesign.co.uk/images/ie7-error.jpg
as you can see the ul is appearing to the right of the li and not the left and it is overlaying the top list. I've tried removing white space, but no luck. Any ideas? If one of you can help it would be much appreciated.
Try this—instead of using a left value to hide the submenus, try using display: none; instead. Then position them using left and top on rollover. This seems to work for me in IE7 in windows and Chrome/Firefox, though I haven't been able to test it in IE6.
#topNav ul{
background:#fff;
border:1px solid #666;
border-top:0px solid transparent;
border-bottom:2px solid #666;
list-style:none;
display: none;
width:100px;
text-align:left;
padding:5px 0 5px 0px;
margin:0 0 0 -4px;
z-index:10;
-webkit-box-shadow: 1px 1px 1px #666;
-moz-box-shadow: 1px 1px 1px #666;
box-shadow: 1px 1px 1px #666;
vertical-align: bottom;
}
.
.
.
#topNav li:hover ul{
display: block;
position: absolute;
left: 3px;
top: 14px;
}
Here's an updated version on jsFiddle: http://jsfiddle.net/BcWd9/5/
I had the same problem. The way it worked out for me is adding an explicit width for the li element being displayed on hover
#nav li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
*zoom:1; /*IE7*/
*width:12em; /*IE7*/
}