•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 426,498 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,189 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 543 | Replies: 6
 |
•
•
Join Date: May 2008
Posts: 4
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
Hi there,
New here and have a weensy problem. I am in the middle of putting together a site:
www.wleigh.co.uk/smarties/press_test.html
It shows up fine in firefox and safari, but the nav links on the left all spread out in IE. I have tried the margin/padding set to 0 for all css styles but no luck.
The second problem is probably a lot simpler - after they have been clicked the links no longer change when hovered over.
The css file:
http://www.wleigh.co.uk/smarties/smarties.css
Thanks for your help.
New here and have a weensy problem. I am in the middle of putting together a site:
www.wleigh.co.uk/smarties/press_test.html
It shows up fine in firefox and safari, but the nav links on the left all spread out in IE. I have tried the margin/padding set to 0 for all css styles but no luck.
The second problem is probably a lot simpler - after they have been clicked the links no longer change when hovered over.
The css file:
http://www.wleigh.co.uk/smarties/smarties.css
Thanks for your help.
•
•
Join Date: Jan 2007
Posts: 2,556
Reputation:
Rep Power: 7
Solved Threads: 115
Put the visited styles at the top of the stylesheet, with the hover ones under them.
If there is a conflict between styles, the lowest one listed in the stylesheet prevails. So the visited ones are prevailing over the hover ones because they are under them.
You are mixing styles and tag attributes. The tag attributes will override the styles.
You can not mix size attributes (width, height) with surrounding styles (margin, border, padding) on the same tag. It causes incompatibilities between IE and Firefox.
Your font size might be smaller than the smallest the font is defined, since fonts are not usually defined in pixels.
You have illegal values in the styles. They deactivate the entire style they are in.
The value 0 must NOT have a dimension suffixed to it (such as 0px).
If an object will not fit in the space allocated, the space will expand to let it fit.
Use the Error Console in the Firefox Tools menu to detect bad styles. It will list the errors after you open the page.
.
If there is a conflict between styles, the lowest one listed in the stylesheet prevails. So the visited ones are prevailing over the hover ones because they are under them.
You are mixing styles and tag attributes. The tag attributes will override the styles.
You can not mix size attributes (width, height) with surrounding styles (margin, border, padding) on the same tag. It causes incompatibilities between IE and Firefox.
Your font size might be smaller than the smallest the font is defined, since fonts are not usually defined in pixels.
You have illegal values in the styles. They deactivate the entire style they are in.
The value 0 must NOT have a dimension suffixed to it (such as 0px).
If an object will not fit in the space allocated, the space will expand to let it fit.
Use the Error Console in the Firefox Tools menu to detect bad styles. It will list the errors after you open the page.
.
Last edited by MidiMagic : May 9th, 2008 at 7:16 pm.
Daylight-saving time uses more gasoline
•
•
Join Date: May 2008
Posts: 4
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
Thanks for your reply - it was very useful and solved the issue with the CSS link order perfectly.
I have corrected all the erros I can see in firefox console. I have changed the fonts to a 'pt' point size instead of pixels. I increased the size of the tds to see if this would help but the site still shows up wrong in IE7. I can't fix it!! It shows up fine in in Safari and firefox. New page up at the same url - any help would be great.
Thanks!
I have corrected all the erros I can see in firefox console. I have changed the fonts to a 'pt' point size instead of pixels. I increased the size of the tds to see if this would help but the site still shows up wrong in IE7. I can't fix it!! It shows up fine in in Safari and firefox. New page up at the same url - any help would be great.
Thanks!
•
•
Join Date: Apr 2008
Location: PLANET EARTH
Posts: 43
Reputation:
Rep Power: 1
Solved Threads: 4
Light Poster
Hey, I went on your first link and it works for me. All the navi bar is in order.
I use IE6 I think, but I don't reckon that helps that much.
Advice:
The Navi bar is great, but you can change it into a flash navi bar. It'll look great.
I use IE6 I think, but I don't reckon that helps that much.
Advice:
The Navi bar is great, but you can change it into a flash navi bar. It'll look great.
C programmers will get smashed by C++ programmers.
•
•
Join Date: Jan 2008
Posts: 37
Reputation:
Rep Power: 1
Solved Threads: 6
Light Poster
Hi,
You said you had specified padding and margins for everything already, however I can see no evidence of this in either your source nor your stylesheet.
Whenever I create any webpage, I always have 2 stylesheets. The first sets the margins, padding and borders for all html elements to 0. This is simply to give me a common place from which to begin with all browsers. In the second stylesheet, I then continue to apply the styles I actually want, rather than the default styles, I'm presumed to want.
To fix your problem, I would be inclined to add the following:
If you reduce all the elements to zero margins and zero padding, it will likely look the same in both FFX and IE. However, this will also probably look naff. But, it will give you a common starting point from which to begin adding the styles to format the page as you'd like.
Also, I noticed in your source that you have given every link a separate class. Classes are meant to be shared between multiple elements, so in my styles above for example, I have given all the links a shared class name of "links". Id is the unique style indentifier. However, you can also use multiple class names for elements, for example, class="contact links".
R
You said you had specified padding and margins for everything already, however I can see no evidence of this in either your source nor your stylesheet.
Whenever I create any webpage, I always have 2 stylesheets. The first sets the margins, padding and borders for all html elements to 0. This is simply to give me a common place from which to begin with all browsers. In the second stylesheet, I then continue to apply the styles I actually want, rather than the default styles, I'm presumed to want.
To fix your problem, I would be inclined to add the following:
table {
margin: 0px; padding: 0px;
}
table tr {
margin: 0px; padding: 0px;
}
table tr td {
margin: 0px; padding: 0px;
}
table tr td .links {
margin: 0px; padding: 0px;
}If you reduce all the elements to zero margins and zero padding, it will likely look the same in both FFX and IE. However, this will also probably look naff. But, it will give you a common starting point from which to begin adding the styles to format the page as you'd like.
Also, I noticed in your source that you have given every link a separate class. Classes are meant to be shared between multiple elements, so in my styles above for example, I have given all the links a shared class name of "links". Id is the unique style indentifier. However, you can also use multiple class names for elements, for example, class="contact links".
R
•
•
Join Date: May 2008
Posts: 4
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
hi r thanks for taking the time to have a look.
what i meant was i removed every instance of the offending 'px'.
So i should have my smarties.css and a blank.css which contains purely the info you posted?
If I stick it in the smarties css it seems to overwrite the align center tag I've given the main table.
Do you mean I could have something like this?:
.links
a.homepage:hover
a:press:hover
etc?
again, thanks for your time.
what i meant was i removed every instance of the offending 'px'.
So i should have my smarties.css and a blank.css which contains purely the info you posted?
If I stick it in the smarties css it seems to overwrite the align center tag I've given the main table.
Do you mean I could have something like this?:
.links
a.homepage:hover
a:press:hover
etc?
again, thanks for your time.
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
•
•
•
•
beta bon browser browsers browsing code css development div dreamweaver echo email encryption eu firefox gecko google checkout google checkout vat html html api internet internet explorer internet explorer 7 javascript leak linux memory microsoft mozilla networking news open source open-source opera phishing scams security social software super symantec tables testing users w3c web webmail wysiwyg xml
- Desktop Display Properties Prob Hijack This Notepad Attached (Viruses, Spyware and other Nasties)
- Internet connected yet IE and Firefox don't work. (Web Browsers)
- 2 problems (GAP and HEIGHT) (HTML and CSS)
- Need help with table problem, urgent. (HTML and CSS)
- Home page + firefox=weird prob (DaniWeb Community Feedback)
- hover over text tips (JavaScript / DHTML / AJAX)
Other Threads in the HTML and CSS Forum
- Previous Thread: Span class with different link properties
- Next Thread: what's the best css books?
