Css For Different Broswers What methods work well to obtain consistent look

[sonesay 7]

I've been trying to use CSS to display most of my page content consistently across safari, firefox, and IE 7 but there is still number of elements that still display differently. I'm using only one style sheet and I am wondering if there is anyone whos fimilar with this problem that may be able to give me some advice. I know trying to use one style sheet is kinda difficult but I dont like the idea of having to build 1 style sheet for each broswer. It means more work that I really would rather not do.

Some major issues I'm having is:

-UL list are not displaying correctly on IE7 take a look at http://forums.xisto.com/no_longer_exists/ . This also dosent display correctly in firefox and safari sometimes. What wil happen is when it loads it displays elements on a new line instead of on the same line. There is enough width space but it still puts it in a new line.

-horizontal scrolling - I've been trying to get rid of this problem for 1024x786 resolution by reducing my page structure size yet it still has scrolling and some kind of padding that I dont want. This is noticable when page content gets long and vertical scrolling is required.

-*{padding and margins} affect things differently between broswers. in fire fox it doesnt affect buttons but in safari it does so applying an additional button{} will still not work.

- IE buttons. I dunno why the code that works for other brower buttons just submits by default and IE dosent.

Is the only way around this is to have different style sheets for different broswers? I'd really like to learn methods to code for all broswers so if I have to I will do it. Having your webpage display too differently btween broswers is not very cool.

Edited January 28, 2008 by sonesay (see edit history)

[bthaxor 0]

sonesay, i think here you have used a different approach to what would be the norm.

in this situation, i would use a form. it is much easier to style, and then the submit button would work by using this code:

<input type="submit" value="Submit">

for the ul, where it puts it on a new line in ie: this is because you have actually used to <li>'s for the elements. if you want them to display on the same line, do it like so:

change this:

<ul class="app_details">			<li class="col1">Desired Username</li>			<li><input type="text" name="app_username" /></li>		</ul>

to this:

<ul class="app_details">			<li class="col1">Desired Username   <input type="text" name="app_username" /></li>		</ul>

(by the way, the non-breaking spaces ( ) are just to put a bit of space between the 'desired username' and the input field)

for the horizontal scrolling: what i always do with my pages is i always put in this little bit of code in my css:

* {	margin: 0;	padding: 0;}

this has always worked for me.

hope i helped!
Edited January 28, 2008 by bthaxor (see edit history)

[sonesay 7]

The reasons for button is they look consistent across different brosewrs. input types look more different. I remeber coming across somewhere on the web but cant remember the link or information. I will get back to you on this one.

as for the UL list its been covered on http://forums.xisto.com/topic/53517-align-text-column-without-tables-using-css-is-it-possible-to-get-a-3-column-alignment-without-using-tables-with-c/ as to why I'm using it that way . The solution given there works for all broswers exectp IE. THat method gives you a table like spacing without tables.

the margins and padding I'ved used and still smilar results. instead it makes it difficult to keep buttons consistent across brosewrs nd dosent help with the horzontal scrolling. I'ved kept my width to 942px yet it still gets horizontal scrolling. I've seen sites recommend withs of 950-960px. I'm not sure if it has anything to do with my CSS setting to align it in the middle of the page.

Edited January 28, 2008 by sonesay (see edit history)

[bthaxor 0]

is the width of the entire page set to 100%? because if it isn't, then that could be the problem.

personally, if i were you i wouldn't care how the page appears in ie i always base my websites on firefox, and your website seems to work perfectly in firefox: submit button and all.

oh and yeah, the submit button. so it both looks better and is viewed the same way in all browsers, i recommend using an image as your button. the image type is by default to submit the form, so you'll have no probs with that:

<input type="image" name="imagesubmit" src="image.jpg" width="55" height="22">

[jlhaslip 4]

Have a look at this link: http://www.w3schools.com/html/tryit.asp?fitml_form_submit

A very basic form, and there are several different ways to do the same thing, but this should work for you.

[sonesay 7]

The page is was set to 100% and the problem still existed. I applied that to body{} style. setting it lower like 942px would get rid of the center alignemnt and make it stick to the left wall.I'm going to be using an image later for buttons but at the moment just basic default looking one will do as long as it works. I'm trying to get some experience in trying to make it work for IE 7 also. I know IE 7 sucks but I'd like to be able to say to a client one day "yeah I can make it work on lolIE7" you know. I'll keep working and if I find a fix I'll update.

[jlhaslip 4]

basic Form: http://forums.xisto.com/no_longer_exists/

styled form: http://forums.xisto.com/no_longer_exists/

[sonesay 7]

Fixed

Button submits in IE now

 

<button type='submit'>Submit</submit>

Thanks for the link jlhaslip. IE will only submit a button if it has that attribute type='submit'