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
Related
I made a website using Twitter Bootstrap.
http://www.photous.org/en/pictures
It works fine on desktop browsers but on the mobile browser (I tested on iOS Chrome) the left margin and border disappears.
I understand that the initial load hides the side as the width doesn't fit but even if I zoom it out the lost margin & border don't come back.
How can I fix it?
Thanks.
Sam
Please include all the code inside
<div class="container-fluid">
Your code here....
</div>
Now your website will become responsive..
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.
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}
I'm not sure if this is a bug in Google Chrome or if this is wanted, but it really annoys me: If I got something like
<body><div style="margin-bottom: 50px;">much content</div></body>
there is no margin shown by Chrome. The div just ends at the bottom browser edge. Literally, any other browser renders this correctly.
Wrap your whole site (or just the area that has the margin you want to capture) in a
<div style="overflow:auto;"></div>
If setting padding does not appeal to you, try the above. I didn't want to set padding, because a margin on the bottom of boxes is my standard way of making room for the next box when data is dynamic and I don't know whether there will be one.
Margins will not "bleed through" a box with overflow specified, so this fixes the problem in Chrome by allowing that last box to have margin inside the new overflow:auto div.
This change is inconsequential to the other browsers who were blocking that margin bleed anyway. I tested in IE 8 and up for regressions on that side and found none.
add a padding-bottom to the element containing your div, even if it's the body element.
This works in all browsers, so you will have to remove the bottom margin from the div.
On Google Chrome {padding-bottom: XXpx;} doesn't work, but {padding-bottom: XXem;} does.
Note the first uses pixels and second ems.
The css padding and margin directives work fine in IE, but not in Chrome. Chrome just ignores them, if they are placed in a .css file. To resolve this problem, put all the padding and margin instructions in a separate file within the <STYLE> tags, and then include it with the help of <?php include ('margins.php');?>. or <!--#include virtual="margins.php"--> into all of your pages, because these directives works in Chrome perfectly if they contained on the page.
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>