So i've worked hard on this website and got to the point where its actually done, however its not working properly on firefox then it does on Chrome/ safari etc. On the contact page the text fields overlap the right column.
The home page doesnt stretch down far enough then in chrome and safari.
What do I do to fix this problem
The website: http://www.growinhealth.org.uk/contact.php
I am still learning HTML/CSS so please go easy.
Thanks
Different browsers handle widths of input fields differently, so I would add a class to the input tags and textarea tag that you want to fix the width of like so:
<input class='yourClass'></input>
<textarea class='yourClass'></textarea>
Then fix the width in the CSS
.yourClass{width:300px}
As for your homepage, it seems that in Firefox the div you call "content1" is too short, so I would put in the CSS
#content1{height:1400px}
Related
I'm trying to add in space to compensate for the height of the navbar in Twitter Bootstrap 3. I'm doing this by adding in
<br>
While this line break appears in Firefox, it does not appear in Safari or Chrome. Full code can be found here https://github.com/srohrer32/beamformer/tree/gh-pages, under index.html. I'm asking how to either fix this problem in Chrome and Safari, or a better way to scale all of the links within the page up by a fixed px value so the navbar doesn't obscure some of my content.
This should do it:
<div class="clearfix"></div>
<br><br>
probably <br/> will work? :)
You should have ending slash for every tag
I've created a webpage that has several divs containing text. The right hand side of the page contains one large div made up of several paragraphs using the p tags. At the bottom of this large div after the closing p tag i have left some space so that the writing does not go right to the bottom of the webpage.
This space varies between browsers. It seems to display exactly how it shows in Dreamweaver in IE9 and Safari but when previewing in Firefox it seems to cut off some of the text at the bottom. This can be fixed by increasing the height of that div but then this also increases the space more in Safari and IE.
I've come to the conclusion that the spacing between each paragraph down the page is larger in Firefox than IE9 or Safari for some reason which is why the last bit of text is getting cut off in Firefox.
Has anyone else had this problem?
Here is link to my webpage: See the difference in the paragraph spacing in firefox compared to IE/Safari, most noticable at the bottom as it cuts off the writing:
www.athatravel.com/NewSite21/srilanka_highlights.html
Do you tried to set a fixed margin-bottom to your -Element... Maybe that is a solution for your issue.
Thanks Eray the reset.css file worked a treat. Thanks for everyones help and advice.I wasnt sure how to accept your's as the accepted answer as you posted it as a comment rather than an answer.
I have a weird problem on a CSS menu. There's a difference in padding applied by both
Firefox & IE9 vs Chrome & Opera browsers. The space left after the last menu item at the end of the menu is different on both the browsers.
Please see the chrome.jpg and firefox.jpg inside zip file to see what I mean.
I have also attached the source html file.
here is the zip file -
https://www.sugarsync.com/pf/D6612639_7394829_952554
Chrome:
Firefox:
This is not padding but likely a difference in how the fonts are rendered in different browsers. Yeah that is pretty much impossible to solve unless you make the menu items fixed width. :)
The firefox version looks bolder (see it?!)... These are brainbreaking problems not fun to deal with but quite easy to explain.
IE9/Firefox use a different technique to render text than Chrome/Opera do.
IE9/Firefox use DirectWrite, and so the text comes out ever so slightly wider, adding up to a few pixels difference over all the menu items.
Read more here: http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite
And read this, particularly the "Hinting and spacing differences" section: http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/
Short of setting a fixed width on each menu item (don't), you can't fix it. However, you don't need to fix it: a few pixels difference between browsers does not matter. Remember, the users of your site are only looking at it using one browser.
I'm having problems in ie7 with notification's that are styled using the p tag. I've used them before and they render fine in IE7, however, in my latest theme, they cut off the top border with no change to the code which is giving me a major headache trying to figure out.
Here's the problematic page, the notifications are at the bottom of the page.
Link
It's annoying because I've used the exact same html and css here in this theme
Link
Can anyone see what the problem with the buggy version is?
You have triggered some bug in IE7, but I'm not sure which one...
The difference between the pages is that you have specified a width for the notification elements in the page that works. If you specify a width for the elements in the other page, they work too.
Forcing layout seems to do the trick. You can read more here:
http://www.satzansatz.de/cssd/onhavinglayout.html
Try adding this:
<style>
.notification { zoom:1; }
</style>
I am having trouble getting the <button> element to render correctly on the iPhone/iPad.
Here is the sample:
<button type="button" style="width:150px; word-wrap:break-word;">some very long text to make it wrap and go to another line</button>;
The idea is to have a fixed width button and the text wraps as needed. In newest IE, FF, and even desktop Safari (Mac and PC) things work as expected. The button width is fixed, the text wraps, and the button height automatically is increased to show the wrapped lines.
On the iPhone/iPad, the text wraps, but the button height does not increase. Thus, the user cannot see all the text.
Does anyone have an idea on how to make this work on the iPhone/iPad like on the desktop browser or is this a mobile Safari limitation?
Ok. This took a lot of trial and error, but I actually got it to work. The key is to add "height:100%;" in the style string. Take out the height and the button does not grow horizontally. Add height and the button does grow if the text is long enough to cause a word-wrap. Guess without a height specified mobile safari gets confused. Go figure. I hate writing browser code. Sickening to think how many programming hours are wasted on crap like this.
After doing some work I have found that adding this to the button style allows the button to render better on iOS mobile devices but you lose a little of the default round styling of the buttons:
-webkit-appearance: none;
You can give background color : #dedede.
Because IOS is not supporting "buttonface" color.
So just add this on your css.
background-color: #dedede;
Update:
It appears now in iOS/iPad that line breaks set (physically or through CSS) on buttons works everywhere just fine.
If I recall correctly from my own testing, the iPad doesn't handle breaks on the button element at all. No idea if there is any way around it.
e.g. this won't work
<button>First<br/>
Second<br/>
Third<br/>
Fourth<br/>
</button>