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.
Related
This is one that absolutely confounds me. I have a site that uses a full-screen "splash screen", which the user then slides away to reveal the content beneath. In Chrome and Firefox, everything displays properly, but on Safari (both mobile and desktop), the div is split down the middle, the left half of the div is transparent (showing through to the content beneath) and only the right half is visible. All the content within it is still positioned as if it were full-screen, but it's all abruptly cut off halfway cross the screen, right down the middle of an image and a block of text. After several days rifling through the inspector I can't find any reason why Safari would be exhibiting this truly bizarre behavior—the split doesn't seem to follow any existing borders or boundaries of any elements, the inspector is acting as if the entire div is visible.
The only thing I can think of is: This issue seems to have appeared around the same time as I introduced some schmancy transform3d effects on the body, is Safari known for being unable to properly handle transform3d effects?
Since I have no idea which section of code could be causing this glitch, I'm not sure what code I would paste here, but the website is http://vanderstank.church. I apologize again for the broadness of this question, but I am unable to narrow it down any further. Thanks for any light you may be able to shed on this situation.
Solved this myself - it was related to the 3D rotation I added. Turns out I had applied the rotateY(6deg) effect not only to body but also to the #front div. I couldn't get that #front rotation to actually work right, so I'd given up on it... but forgotten to delete the line.
But because #front had a rotateY(6deg) on it while on the same plane/axis as body, it rendered as if the right half of it was "in front of" the body but the left half was "behind" the body. Still not sure why this only happened in Safari.
Remember to delete or comment out old code, guys!
I’ve got a flexbox problem that occurs in Safari and Opera (probably Chrome also, haven’t checked). In Firefox everything looks as it’s supposed to. Here is the link: http://corvinweber.de/download/v5/
When you scroll down to the bottom of the page you’ll find the reply form. I want the fieldsets “.message” and “.senderforms” to be displayed next to each other, just like Firefox does it. However in Safari and Opera “.message” expands in width and “.senderform” gets pushed to the next line. Strangely, if I set the width of “.message” to 50 px “.senderforms” still gets pushed to the next line. The developer tool indicates that there’s a margin added to the right, although “margin-right” is set to 0.
I have also tried to use the -webkit-prefixed version of flexbox, but it didn’t help.
It’s probably just a small adjustment in the css, to make it work, but I can’t figure it out. Can someone help, please?
Obviously the fieldset nested in another fieldset was the problem. I turned the outer one into a form and it worked.
I have this bug that let some text appear a few pixels outside a div on the right side. The strange thing is that it only happens in Safari. I've never seen it before and it's just regular HTML/CSS what I have used. I've looked around on the internet but I can't find the exact same problem - only some problems with content floating out at the bottom, because of a fixed height.
In the next 2 screenshots you'll see the same page in Safari and Chrome. The div has a overlow:hidden to hide a possible third line of text. I added fixed widths when trying to solve the problem. I also tried to add/remove some margins, but I can't get rid of the extra pixels.
Here is a full link to this page. It happens in this section of the website only. In other sections - like this one - where I use the same format with little differences, but the same CSS idea (fixed width with overflow:hidden), there is no bug in Safari.
I hope you have some ideas!
Removing position:absolute from
div#branch-search-results-block div.search-result-right div.search-result-drvl-info-bottom .spacer::after
css style solves the issue. But I am not sure what else is affected by it. Please try this.
My situation looked just like the problem discussed here:
Clear float issue
That is:
"I have a page with the standard navigation bar on the left and the content area taking up the rest of the horizontal area to its side. …
This works fine except when the content area itself has floated elements and I try to use clear. My goal is to displayed the clear element right after the content area floats but instead it gets shoved down below the nav area."
but the solution given there didn't work for me. I've read about the issue; the following page seems to discuss most of the solutions:
http://css-discuss.incutio.com/wiki/Clearing_Space#Clearing_space_beneath_floated_elements
but none of these solutions worked for me either.
In IE8 only, I get a large gap above the table, all other browsers that I tested are fine. I'd really appreciate another set of eyes.
The page is at:
http://www.diabetesgoaltracker.com/home.html
Thanks.
Your webpage is now served in quirks mode, meaning the browser renders it not according to the spec. Add a doctype, such as <!DOCTYPE HTML> to the top and that should resolve it.
I'm having with some margin or padding issues with IE8 that I'm hoping someone here will be able to help me out. Below is a screenshot of the site in IE7 with the correct spacing (it looks pretty much the same in FF and Chrome/Safari as well).
alt text http://img80.imageshack.us/img80/9376/screenshot20100721at749.png
Next is the same page in IE8 with a whole bunch of extra spacing between the created by line and description.
alt text http://img687.imageshack.us/img687/9376/screenshot20100721at749.png
You can take a look at the live site here. I've messed around with the padding and margins without any luck, I have no idea where the extra space is coming from. Inspecting the element using the IE developer tools shows an offset that doesn't add up to me, but I'm not sure why this would be happening.
Any help at all would be greatly appreciated.
The problem is with the SPAN at the end of <span style="padding-left: 10px">1 Voter<span>. It should be a closing tag. Change this code to:
<span style="padding-left: 10px">1 Voter</span>
This will fix your problem.
Remove the padding from the div containing The best places for sharing a meal with someone special. and replace the div with a p. See what happens. Adjacent vertical margins should collapse properly.