| Author |
 Topic  |
|
|
Steve D.
Average Member
USA
640 Posts |
 Posted - 30 December 2004 : 04:40:28
|
So I just finished a page for our daughter and it of course looks great in IE, but there are weird inconsistencies in Opera and Firefox.
The page is http://www.steveandrebecca.com/Grace
- The main problem that I see are the width of the left hand menu items.
- The border around the main picture is black in Firefox instead of white
- No borders around the thumbnails in Firefox
|
Swing Dancing Video Clips - It's All Swing! Forum |
Edited by - Steve D. on 04 January 2005 02:02:33 |
|
|
Davio
Development Team Member
Jamaica
12217 Posts |
Posted - 30 December 2004 : 05:33:22
|
I would advise you code for Opera or Firefox browser first, then fix or tweak it for IE. Opera and Firefox are more standard compliant to the W3C standardds while IE does not. So you might end up coding with IE specific codes which break in other browsers.
To your problem with the menus, is the css "width" attribute you are using on the A element.
I would suggest, using a DIV tag around each menu links with the class "menulink". One example below:
<div class="menulink"><a id="lnkCategory1" class="menulink" href="javascript:__doPostBack('lnkCategory1','')">3-6 Months</a></div><br><br>
In your styles, take out the font, text-decoration, text-align and color attributes from the .menulink class, and move them to a new property, like so:
a.menulink {
font-size: bold;
font-weight: x-small;
text-decoration: none;
text-align: center;
color: #9B9BC4;
}This will set the text decoration for your menu links.
The rest of your style sheet would look like this:
<style type="text/css">
div.menulink {
width: 110px;
height: 20px;
background-color: #fdfda5;
border-color: #9B9BC4;
border-width: 1px;
border-style: solid;
}
a.menulink {
font-size: x-small;
font-weight: bold;
text-decoration: none;
text-align: center;
color: #9B9BC4;
}
</style>I would also suggest using pixels instead of x-small for the font-size. Different browsers interpret x-small so you would get different sizes for each browser.
I'll take a look at your other problems later. |
Support Snitz Forums
|
 |
|
|
Steve D.
Average Member
USA
640 Posts |
Posted - 03 January 2005 : 23:31:00
|
| Thank you so much!!! That makes sense now that you pointed out what I was trying to do. Oh well, I'm starting to get the hang of this css stuff. |
Swing Dancing Video Clips - It's All Swing! Forum |
|
|
|
Davio
Development Team Member
Jamaica
12217 Posts |
Posted - 04 January 2005 : 00:24:33
|
You're welcome. 
You fixed your other problems you were having? I had forgot about your topic.  |
Support Snitz Forums
|
|
|
|
Steve D.
Average Member
USA
640 Posts |
|
|
Davio
Development Team Member
Jamaica
12217 Posts |
Posted - 04 January 2005 : 02:46:25
|
You haven't assigned a color to the border have you? You just set border to 10 for the image?
It looks like the border color is being inherited from somewhere else. Don't know where.
Ok, now I see the problem. Look at this. In the source code for IE this is what it is using to display the image.
<img id="mainImage" src="images/3-6_Months/1.jpg" alt="" style="border-color:White;border-width:10px;border-style:Solid;" />
For Firefox, it is producing this:
<img id="mainImage" src="images/3-6_Months/1.jpg" alt="" border="10" />
So it is not outputting the inline style for firefox. You probably will have to specify the styles in your style sheet instead of the asp handler <asp:image>. It is probably doing this for some of the other tags you have. |
Support Snitz Forums
|
Edited by - Davio on 04 January 2005 02:46:56 |
|
|
|
Steve D.
Average Member
USA
640 Posts |
Posted - 04 January 2005 : 03:12:03
|
OK... So I replaced the asp:image with a img with a runat=server and the style now works. I tried the same style on the asp:image and it just wouldn't work.
I'm assuming my thumbnails are suffering from the same problem.
Thanks again! |
Swing Dancing Video Clips - It's All Swing! Forum |
|
|
|
Davio
Development Team Member
Jamaica
12217 Posts |
Posted - 04 January 2005 : 03:26:42
|
Yup, from the looks of it, the style is missing from the thumb images, while it is present in IE.
Glad I could help you out. |
Support Snitz Forums
|
|
|
| |
Topic |
|
Topic Locked
