Could anyone please explain why on this page (and some of the other pages a part from Home and About) http://leedsragfashionshow.co.uk/wp/index.php/committee/, the title of the page is cut off showing only half of the word.
Sometimes on refresh it will show the title in full with the grey background and sometimes revert back to only showing half.
Experiencing this on Chrome
It seems to load fine on Firefox and Chrome. The only "title" I see being cut is the title html tag being cut because of tab size restriction in chrome. Maybe I'm misunderstanding? All looks fine.
It looks like you have a lot of width: 100% and width: auto. You might be overwriting yourself in a few places. Try removing some of those and see if that helps.
Related
I have a problem with my new website i'm designing in HTML5.
It's a single page site with 5 different sections.
The home page is index.html#home and all sections appear properly, except of index.html, which is zoomed-out.
All sections have the same CSS:
width:100%;
background-color:#7fffd4;
padding:5px 0px;
margin:0px;
Here are the screenshots:
Normal:http://i.imgur.com/VO8U28o.jpg
Zoomed-out http://i.imgur.com/NZ11fHy.png
If you have any idea how to fix this i really appreciate it.
Chrome remembers the state of the zoom for each URL you have set, make sure you haven't accidentally zoomed out on the index page.
Press CTRL + 0 on the index page to check (or go to view > actual size).
The Text on one section is pretty long. I think this is causing the zoom-effect. Try to shorten the text or auto-wrap it with CSS.
You could put the long text in a <div id="someid"> and change your CSS
like this:
#someid {
width: 100%;
padding: auto 30%;
}
auto is top and bottom and 30% is for left and right.
You should adjust the 30% like you want.
It will format your divs to always use 100% of the given browser window.
Thank you both for your quick reply.
The index.html was in fact zoomed out in chrome, although i put it to 100% on some other subpage of my website.
I'm going to wrap the text anyway, that was a good idea. Thanks again.
Cheers, stax
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.
See this link:
http://lsp2.tpdserver2.co.uk/test.htm
Displays fine in IE/Chrome but in Firefox (6.0.1) there is a 1px border around the blue header.
If I add a background color to the #header-content, the 1px white border dissapears. This seems crazy.
I cannot work out what is going on with this and the related page I am trying to build depends on not having a background colour for the 2nd fixed container.
Here is an image of the problem I see:
Link to Image
It is layout rendering bug in Firefox. This bug was already reported and as I know it is fixed in next release. Only solution I know is to use opacity:0.9999999. It would render correctly as opacity:1, but fix this annoying bug.
Try #header { opacity:0.9999999; }
Bugzilla : Bug 677095
EDIT: Firefox 8 is not affected with this bug and setting opacity to 0.9999999 will result in weird border around the element, so I prefer not to use it anymore
Browsers add different defaults if you don't "reset" the CSS, that may be what is going on here.
If the z-index value of your #header-content is not greater than 10, then the bug is fixed. If it's 11 or greater then I can see the mysterious gap too.
Really weird.
I cannot reproduce in FF 6.0.1; however, you can probably work around this with
background-color: transparent;
on the #header-content, or white if you don't want it being see through.
This should still give the fix you mentioned while remaining a blank div as required.
Update:
Ok thanks for the screenshot, still cannot reproduce, this time with ff 6.0.2 - I had a look around after noticing I can reproduce a similar issue on different zoom levels.
Blog post explaining the zoom border bug, which includes this test page. I am not sure if this is involved, seems similar but not the same thing, zoom bug will take off a slice of the whole page including the border of #header-content.
As for your comments around transparent, you can use it and still supply a background image, does this not work for you?
I have been pulling my hair out on this one all day, and I'm hoping someone smarter than me can figure it out.
I'm working on a new design for my site, and I've run into what appears to be a Firefox bug. I am using background-attachment: fixed for a gradient on the <body> element and then I have a full width <div> with another background image at the top of the page. Only in Firefox, there is a small white border at the top of the page and on either side of the <div> background.
I've tried at least a half-dozen different ways of coding the HTML and CSS, and they all produce the same results. Also, the white gap doesn't appear to be there in earlier versions of Firefox (I noticed it in version 6). I even did a clean reinstall of Firefox without any add-ons, and I'm still seeing it. Any ideas on what's causing this? Is my code wrong in some way?
See simplified test case here: http://mygemologist.com/bg-fixed-test.html
Note: This question may be related to: Crazy CSS Issue in Firefox Only - position fixed and background color, but I'm not sure on that.
Dominic, see https://bugzilla.mozilla.org/show_bug.cgi?id=677095 for this issue and https://bugzilla.mozilla.org/show_bug.cgi?id=677095#c47 for a possible workaround.
Maybe use a smaller width image? It seems firefox has issues rendering it, when zooming it goes from properly displayed to having a 1-2px white border above it.
EDIT
When I change the body css to background-position: scroll the problem seems to go away
body {
background: url("http://www.mygemologist.com/resources/bg-gradient.jpg") repeat-x scroll left top transparent;
}
If you go on to my website, lookaroundyou.net and click on USA (which is where there are more video's than anywhere else on the site), the websites layout changes completely.
Does anyone have an idea as to why this happens?
I don't want to visit your site if it's crashing Firefox, but if the problem is indeed due to more content causing a scrollbar to show up and thus changing your page width, one easy way to sort that is to always display a scrollbar (it will be disabled if there is not extra content below). In this way, the width of the page will be the same regardless of length.
<style type="text/css">
html { overflow-y: scroll; }
</style>
I'm sure there's some other non-standard setting with IE that will do the same; that's left as an exercise for you.
It's causing a scrollbar because there are more videos.
I'm using chrome and I don't see any difference other than the page shifts when the scrollbar on the right appears.....