CSS, Firefox and a problem...

Hey This is my first post here and im hoping I'm in the right place.

I am currently developing a web application on behalf of my girlfriend but have run into a bit of a problem...

I have a menu-type bar at the top of my page and am using CSS to make it loo knice. (to color, remove underline and create a rollover effect) However whilst it looks pretty nice in IE (or ie based browsers, I use Avant) Firefox really doesn't like it.. (or maybe my CSS doesn't like Firefox)

I have temporarily hosted an example of my problem on a friends server as mines not hugely stable (Dynamic DNS updates are a bit screwy)

http://ankhsvn.com/group/default.aspx

The style sheet I use can be found here

http://ankhsvn.com/group/styles.css


I use VS 2003 for design and (although probably not relevant) Host my apps on IIS running on Windows 2003 Server (the temporary hosting is on Apache using mod_aspnet)

Perhaps CSS is not meant for this kind of thing... or perhaps I'm just not using it right. Either way any comments as to a solution for this problem would be appreciated.

Cheers

Matt

Sorry but I don't seem to be able to use links until I have made a specific number of posts so you may have to copy and paste the links into your browsers...

 

Try this css instead. It is not much different, but it works on my test page here.

You might want some more padding on the inside of the links, I just moved them out 2px all around the link, so maybe something like padding: 2px 5px 2px 5px;. I also changed the width of the border to 1px instead of 1pt. Mozilla was drawing it with a larger line on the bottom.

Hope that helps.


a.mainlink {
color: steelblue;
font-family: arial ;
font-size: 11pt;
text-decoration: none;
display:block;
padding: 2px;
}

a:visited.mainlink{
color: steelblue;
font-family: arial;
font-size: 11pt;
text-decoration: none;
}

a:hover.mainlink{
/*watch the padding here or the link might look like it moves with a border placed around it. You will have to adjust this depending on the padding in mainlink. */
padding: 1px;
border: 1px solid steelblue;
background-color: #e6e4e4;
}

a:active.mainlink{
color: steelblue;
font-family: arial;
font-size: 11pt;
text-decoration: none;
}

 

Thanks a lot I didn't realize there was a different between px and pt..

I have pretty much managed to get it working in firefox and ie now.

Thanks for your help

Matt

 

Guess I'm silly lol pt is a font size and px is pixel right! lol

Matt

 

Ok this is probably not quite on-topic (Not CSS but still relating to my firefox issues)

I have 2 textboxes (vs talk I believe I should be calling them Input Fields) I set their width and in ie this is fine but firefox decides to ignore the style part of the input tag...

if you compare the source of the version in firefox its completly gone,...!

Any ideas

Matt

 

I might have a better idea if I can see the page, but if my memory serves me right I have had that problem before and the only fix I found was to define the width the old fashion way in html using rows and cols with the textbox I believe. Post a copy of the page and I will take a look, and if I can't help there are tons of great people here that can.

 

oops sorry I forgot the link!

I still can't add 'live' links so sorry guys

the site is on my own server but can be a little unreliable (dynamic dns not updating, housemates downloading excessive quantities of duboius content videos... you get the point) so if it doesn't work then try again if it still doesn't work then .... actually I have no solution really..

anyway the site in question is here

http://m0.sytes.net/group

The problem is on the login page...

http://m0.sytes.net/group/login.aspx

It looks ugly I know.... but the only solution to look the same in firefox was to leave the textboxes the default size and centre them

Matt

PS any idea on making the login page look nicer would be appreciated...

 

Ya, took a quick look. I remember I have had this problem before, and the solution I used was to not use a style to define the width of the textbox. I used the size attribute in the input tag, and the input boxes will render more or less the same in both browsers on Windows at least.

So if you want to use the old fashioned way try this:

<input name="txtPassword" type="password" id="txtPassword" size="25" /> and remove the style information.

Someone else might have the css fix for you.

 

I actually managed to fix it using a small CSS class,

I don't know if how familair you are with asp in VS 2003 but you speak from some experience so I guess you know more than me!.. (im from the vb6 school and have upgraded to .net in the last few months and whils my windows application coding is getting better, I'm not keeping up with the standards in web design)

It seems that the webforms textbox is somewhat differnt to the html TextField...
I was building the style in the property box and not in a seperate CSS file and there must have been a slight anomoly in the syntax (I know firefox is a lot stricter, your point on adding px has fixed any problem I had before)

Using this

Input.TBox {
width: 200px;
}


in a CSS file fixed it no problems

I think I need to bear in mind that IIS is a MS Product, IE is a micrsoft product and VS is a microsoft product, They all seem to have been made to work well with each other but with no regard to any 3rd part browser or IDEs / OR / I am also beginning to wonder/realise that/if infact IE has a lax attitude to style sheets and layouts and Firefox was right all along (I'm not ready to switch just yet lol I guess i've gotton comfortable with Avant!)

Anyway im blabbering.... Thanks a lot for your help... It's is much appreciated

I hope I can help you in the same way one day!

Matt