I'm working on a website which is working perfectly on every browser except firefox. In firefox extra space is added at the end and an extra vertical scrolling is there. My website is hosted here. Can anyone please tell me whats going wrong.
The I frame could be causing it. If you add
Style="position:fixed;"
in a div serving as the back ground like this
<html><head><title>your title</title></head><body>
<div Style="position:fixed;" name="entire web page">
<p><h1>HI and welcome to my world</p>
<div>some content...</div>
</div>
You might also add it to any "big" items like large pictures
it will also help if to make sure all of your appending** height percentage add up to no more than 100% trying to display 140% of a screen means it needs a scroll bar. a have had this trouble me for days before. **Any object that is stacked on top of another.
Related
I don't know why, but only on Safari a section of a webpage I am working on becomes scrollable.
It is the only section which happens and it's the only browser on which this occurs.
Can anyone help me figure this one out?
Link to the webpage, if you want to inspect the code: http://sistemecreative.ro/demo-istoma/
I decided, as a workaround, to make both the left and right divs and their wrapper the same height using a fixed value.
I'm currently in a web design class to learn to code, but I have been struggling with a code and cannot figure it out for the life of me.
I have my portfolio website I'm currently working on and cannot figure out how to get the background color of my main section to go all the way to the page. If you look in the attached screenshot, my main section won't go to the bottom of the page. I have tried height: 100% and height: 100vh with no luck.
Photo of problem:
Coding is to much to post because I'm not even sure what could be causing it...however, the website link is here if you could look at the page source:
http://cherylju.com/com6338/p1_Ju_Cheryl/about.html
Any help would be amazing! I've been trying to figure this out for hours now.
Wrap you sections side by side inside a div and give it the property display:flex
<div style="display: flex;">
<section class="secondary-page"></section>
<aside class="resume"></aside>
</div>
Doing it you 'll notice inmediate changes (including what you are looking for) but the order of the sections will be changed... Then, You can get rid of float that it's not at all the best option for your goals... specially if badly used (you don't use float right to an element and float left to the other... both need same direction).
More about flex here
So what I am trying to do is reproduce this effect (which can be seen using chrome Version 45.0.2454.101 m). The important thing to notice is that each div is displaying a piece of the overall background image in the wrapper (except it is actually a separate image of the same size that is modified by inverting the colors so you can see the difference).
Basically it appears as though each content div is using a background image that is the size of the document itself.
Structure:
<div class="wrapper">
<div class="content">
Here is some content
</div>
<div class="content">
Here is some more content
</div>
<div class="content">
So much content
</div>
</div>
However, if you were to go visit this link on your mobile device you'll notice that now each div is using its own background image and not overlaying with the wrapper's background image. The background image is now the same size of the content div and is positioned per content div. Why is this happening and how can I get the mobile website to look like the one experienced in a desktop browser? (I am also using chrome on mobile)
Link to JS Fiddle
Kudos for the effort, but this is simply not going to work as it depends on background-attachment:fixed. Mobile browsers try to actively improve the view experience by 'intelligently' handling certain page content differently, especially when it seems desktop-optimized.
One of the things they choose to do is ignore things like background-attachment:fixed, because usually it breaks more than it enhances on not-so-intelligently designed pages on a miniature screen.
So I'm sorry but http://caniuse.com/#feat=background-attachment is your problem here, and it's not going away soon :)
I am working on a fixed width page using bootstrap and I noticed when testing it on iPhone the full width header and footer background were clipped to 70% of the width.
It's Business marketing type site, frequented by people looking for a supplier, normally from their office PC so the responsive aspect was not a requirement but I digress.
Back to the problem
Viewing on a full size screen it looks as it should but if you scroll smaller than the limits of the container class (940px in this case) and then scroll back a little you can see the background has trimmed.
I have been tinkering with it for a while to the point where I have stripped everything out and just put in a simple bunch of nested divs to test and make sure the issue is not some rouge tag but it still does exactly the same thing.
I think the issue is related to items that are not wrapped in the class of container but if I need a full width panel and 940px fixed content I am not sure how I am going to achieve it with bootstrap.
// This Fails
<body>
<header class="fullwidth">
<div class="container">
<p>The content</p>
</div>
</div>
</body>
// This is fine but not full width
<body>
<header class="container">
<p>The content</p>
</header>
</body>
I have not adulterated bootstrap if I remove it or my styles together and restyle the body manually it goes away. But it seems to be a cumulative issue...
Anyone come across this before?
I don't really want to have to strip bootstrap out if possible.
As requested I have appended the link:
http://jsfiddle.net/NcZFz/3/
If you notice in jsfiddle whatever size your viewport is the header will fill it, but the view port only. And if you are using a MAc and have a magic mouse (or whatever) you can scroll right in that view port to see white. But this is supposed to be edge to edge so there should be no white.
It appears you have a margin on the <ul id="menu-primary-navigation">
#menu-primary-navigation { margin-left: 0; }
And you should also put .clearfix on the same element (because children are floating)
<ul id="menu-primary-navigation" class="clearfix">
Check this working jsfiddle.
All the above fixes could be avoided if you used the .navbar .nav classes (and associates) : read the doc.
I have a problem I haven't found an answer to in similar questions:
I have a site that dynamically resizes a horizontal scrolling image gallery and some text as you resize the browser. That part I have working OK, I just can't seem to get proper control of each respective element.
Take a look: http://john-godwin.co.uk/testsite
If you resize the browser, the large text overlaps the gallery before the gallery starts shrinking, and if you resize the browser small enough, the gallery eventually overlaps the footer as well.
Does anyone know what changes I need to make to the code to make everything stay within a boundary and resize respective of the other elements without encroaching into each elements space?
Thanks in advance.
The CSS can be found in http://john-godwin.co.uk/testsite/css/style.css
Remove z-index:500; in the .content class