Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
On my client's website opcstm.org every browser I've tried (Chrome, Firefox, Internet Explorer) renders a margin of about 16px at the top of each page except the homepage.
For example, compare the homepage to the Contact Us page. On the Contact Us page you will see that the logo, the entire header element, and the entire page is separated from the top of the browser window by about 16x of margin.
I've used browser developer tools to inspect the first three elements in the HTML code (body, div.site-container, header.site-header) and none of them have top margin or top padding specified.
I'm stumped! Can you help?
The id of title (p in the header) is your issue. Remove it or give it a margin: 0;
#title {
margin: 0;
}
For a quick fix you could just add style="padding-top:16px" to your <div class="wrap">
for example: <div style="padding-top:16px" class="wrap">
I would not recommend doing this every time. This should be used as a temporary fix until you find the problem.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am working in a CMS based project where I have a left side navigation and content area.
While I click on the menu for first time, it works as expected i.e clickable but If I click for the second time,it(i.e the link) did not work as expected.
Let me give you the link ,
visit sandbox
Note: In index2.html there is a class called main-wrapper, now when I remove that class , the navigation works perfectly.
Please tell me how to fix this problem.
Include the below css in your css file or in inside head tag and your sidebar will now work.
.main-wrapper-dashboard .sidebar {
z-index: 9999;
}
Your main sidebar had been overlapped by the secondary sidebar in index2.html thats why you were not able to click the links.
By looking at your page I observed that main-wrapper main-wrapper-pages come over main-wrapper main-wrapper-dashboard so you can not click on main-wrapper main-wrapper-dashboard so try to add z-index to that:
.main-wrapper.main-wrapper-dashboard {
z-index: 100; //any value more than 10
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm using Flexbox to lay out a site and IE11 is not playing nicely. The footer element is supposed to be at the bottom of the page or the bottom of the content, whichever is longer. This works fine in all other browsers including IE10. But in IE11 it does not stick to the bottom of the page. According to https://msdn.microsoft.com/en-us/library/jj127304(v=vs.85).aspx the justify-content property does not need any vendor prefixes. What gives? Why does this break in IE11 and not IE10?
Here's the live page I'm working with: https://www.tntech.edu/dev/ttu15.interior
Have a read at http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/ for a full explanation.
The actual solution apply the following changes
#rap{height:100vh;}/*change min-height to height*/
#rap > header,
#rap > footer{flex-shrink:0}
#rap > main{flex: 1 0 auto;}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am developing a website where I have a top menu and a background image with some text on the home page. This covers the whole screen. BUT at the bottom of the screen there have to be 3 blocks who show up at the bottom of any screen or device. I am able to to this for Chrome but for Firefox for example the blocks are way far down at IE the same... What I want:
I am currently doing applying following code on the div containing the 3 blocks:
position: relative;
top: -150px;
But as mentioned above in another browser this div shows up to low so the user won't see it until he scrolls...
Any solutions here?
Simple change:
position: fixed;
bottom: 0;
Better idea to wrap it inside another <div class="bottom-stuff"> and give the rules to .bottom-stuff.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
enter code herehttp://jsfiddle.net/rLP5V/
I have my document listed above, for some reason, even when I set margins to 0 the margin between the header1 and nav bar still shows and leaves an unnessecary blank between the both of them. Please let me know how to get rid of it. P.S. The page I am creating is for a project
Elements like h1 and ul have usually their margin set by the browser's (user agent) own stylesheet unless explicitly overwritten :
h1 {
margin: 0;
height: 50px; // SAME HEIGHT AS PROFILE PHOTO
}
ul {
margin: 0;
}
See Fiddle: http://jsfiddle.net/bonatoc/jhU85/1/
Look for the last lines added to the CSS.
The h1 element has a margin defined by the browser. You will have to override this in your CSS.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Recently I created a new horizontal navigation for my 2 sites but on one site it looks good, yet on another I am having trouble controlling the positioning.
For example, If you review the horizontal navigation links at the bottom of the header image here: http://classifieds.your-adrenaline-fix.com/ you'll likely agree that it looks good but if you click any of the horizontal links these will take you to the main site where you will see the same horizontal navigation but the problem is I can't gain control of the positioning nor can I seem to figure out why the 2 are different with nearly identical HTML and CSS.
If anyone wouldn't mind taking a look at the link I provided above you'll see what I'm talking about and if anyone wouldn't mind showing me what Im missing, I'd be most appreciative and I thank each of you in advance.
PS; I've been trying for hours...
On the page that looks correct, your <ul> has the following styles defined in form-css.css around line 70
list-style-type: none;
padding: 0px;
margin: 0px;
The main page does not have this styling. The important parts being the padding and the margin. Default styling on a list usually gives some pad and margin to a ul, which is what we are seeing in the main page.
I compared the CSS for the two pages using chrome developer tools. As you said they are almost identical in HTML and CSS but I did find a difference.
This page:
http://classifieds.your-adrenaline-fix.com/
**The ul tag has some css properties applied to it which are not present in the other page( the page which is messed up) namely:
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
This css clip I found in the form-css.css page.
Removing this css part, messes up the page where the horizontal navigation is looking fine as well.
By adding these CSS properties to your ul tag for the horizontal page links for the other page(http://www.your-adrenaline-fix.com/) should fix it.