I've been working on a new theme for my wordpress website and after some tinkering everything looks and works fine except for my header.
When I open the website In firefox the header goes to It's full size and it ends up being too big while In other browsers It Is fine.
I've been googling solutions but none seem to work for me. Can anyone help me out so that firefox users won't get a big banner slapped in their faces?
Thanks In advance.
Link to my website
The problem is with the float on the wrapping div.navbar-header. I don't know is max-width within a float is offspec, but just override bootstraps "float: left;" with "float: none;" from on the .navbar-header and you're good to go.
You can also get rid of that img {max-width:100%;} and replace it with a simple width:100%;
Related
It works on chrome but not on IE. I really need your help.
The site I am working is:
http://www.westerncircuit.com/results.php
I am trying to get sticky footer to work on IE but I cannot figure out what is wrong with my code.
I had tried including:
ie10-viewport-bug-workaround.js
ie10-viewport-bug-workaround.css
But it didn't worked. I have all the files required for the sticker footer such as bootstrap css, js and sticky-footer css. I really have no idea what am I missing.
Your kind assistance would be appreciated!
Turns out I just need to add
navbar-fixed-bottom
to my footer for it to work.
This is my first question here, so bare in mind that we may have some issues with code.
But the thing is that i'm using a template (Cant remember what template atm) that is supposed to work in every browser but i cant get the code to the bottom.
URL TO SITE IN 1 Comment.
I'm pasting the HTML & CSS with Pastebin for you people that don't wanna see the page.
Please bare in mind that the CSS is rough and not clean, same with the HTML as the page is under development.
I searched here a couple of times without result, and couldn't get it going without messing up the whole page.
I can only test this live on Safari in Yosemite, and on Chrome Win 7.
HTML and
CSS
I think myself that it have with the bottom images to do with.
FYI: I don't own any of the logos and this is a non profit entuisasm project for F1 Simracing.
Thank you and kind regards.
U have really messed your code a lot..!
Do these changes, it will work perfectly.
remove html,body {height:100%}
/**** add CSS ***/
html {min-height: 100%;position: relative;}
body {margin-bottom: 288px;}/* height of footer */
footer {position:absolute;width:100%;left:0;right:0;bottom:0;}
delete that container tag from bottom of html page.
Alright, I got the footer to the absoulte bottom of the browser (Safari atm)
But the content gets hidden behind the footer, and thats no good.
Attaching image and code
Screenshot CSS
Im really sorry for the messy CSS, but i really appreciate all help!
I'm creating a website and have a problem with the way it displays in different browsers. I'm testing using Chrome, iOS and IE8. The site displays correctly in the first two, but not so in IE.
The website in question is http://www.edalemill.co.uk/
Can anyone help point out what's wrong with my CSS to solve the problem?
Thanks!
I have taken a look and can replicate the issue.
I would suggest removing the
overflow:auto; from the #stripper
You have also used body more then once as well in your CSS, I would suggest having only one lot and tidying up your code.
Possibly consider using this as a base which should help you:
http://meyerweb.com/eric/tools/css/reset/
UPDATE
Otherwise for your code do the following for the CSS
#sidebar {
position:fixed;
}
I would recommend making that IE8 code only though
If you take out the height:100% on #container the background image fills up the rest of the text area for the about page.
Let me know if this helped.
Update
It might just be easier to have another CSS tag for the content areas that scroll. The height:100% works on those content areas that don't scroll, however, they break on those that do. My recommendation, even though it might not be the best way, is to either make a second CSS tag for the content areas that scroll, or just simply make the image bigger.
I was looking recently for a dynamic css sticky footer solution and came across this one:
http://pixelsvsbytes.com/examples/sticky-footers-the-flexible-way/simple.html
it seems to work great in most of the popular newer browsers that i've tried but for some reason chrome doesn't display it in the same way and my guess is that safari acts in the same way.
can anyone point a finger on where the problem might be?
Thank you.
ok I solved it thanks to Explosion Pills comment.
It is most likely a bug if you set the body tag display property to be display: table.
to solve it just place the elements inside another div tag and set it as display: table
I'm having problems in ie7 with notification's that are styled using the p tag. I've used them before and they render fine in IE7, however, in my latest theme, they cut off the top border with no change to the code which is giving me a major headache trying to figure out.
Here's the problematic page, the notifications are at the bottom of the page.
Link
It's annoying because I've used the exact same html and css here in this theme
Link
Can anyone see what the problem with the buggy version is?
You have triggered some bug in IE7, but I'm not sure which one...
The difference between the pages is that you have specified a width for the notification elements in the page that works. If you specify a width for the elements in the other page, they work too.
Forcing layout seems to do the trick. You can read more here:
http://www.satzansatz.de/cssd/onhavinglayout.html
Try adding this:
<style>
.notification { zoom:1; }
</style>