My website's logo shows up normally in firefox and such, but in internet explorer the logo shows up behind the background image and it's really bad looking. Can someone tell me how to make the logo appear in frount of the background image?
Site like so you can take a look at the codeing: http://turquoisegrotto.com/
Get rid of all your wacky * selectors, add a strict DOCTYPE and try again. The logo isn't behind the background, it's offscreen somewhere.
EDIT: You have a DOCTYPE, get rid of the comment above it. DOCTYPE must be on the very first line.
You write some whacky CSS, what's with all the negative margins? I'd stay away from that stuff, not sure why your #navi had 120px height on it either, (and hence all the -margins).
Still, no reason for IE to put a logo behind the body's background-image! That was strange for sure.
Anyway these changes will bring the logo back into the magical world of the body:
body {
background-color: #CCFFFF;
color: #000000;
font-family: Tahoma;
text-align: center;
background-image:url("images/bg.png");
background-position: top left;
background-repeat: repeat-x;
/* changed */
margin-top: 0;
}
#navi{
width: 100%;
background-color: transparent;
text-align: left;
/* changed */
margin-top: 3px;
height: 20px;
}
#logo{
height: 120px;
background-color: transparent;
margin-bottom: 70px;
/* changed */
margin-top: 5px;
}
I'm sure your other elements will need adjusting since the logo and nav don't have big negative margins anymore.
Try setting the z-index (CSS Property) of the logo image to 10.
Related
The majority of the site displays well in all browsers including mobile except for the footer.
In 1600X900 dimensions the footer displays perfectly. On sites where the resolution height is below 900, the footer disappears. I've tried everything I could think of to have the footer "snap" to the bottom of the screen and am clearly out of my realm of expertise. Tested using the latest Chrome and Firefox with similar/same results (that is good I guess, LOL).
How do I have the bottom black elements snap to the bottom of the page?
URL of website: http://bit.ly/1ro8FtA
Screenshot at different dimensions: http://bit.ly/1uLGgNX
If I understand correctly (if you only want to move your Footer and not the all black region), try to change your CSS:
.agentpress-pro-black .site-footer {
background-color: #000000;
font-size: 16px;
padding: 40px 0;
text-align: center;
}
to this:
.agentpress-pro-black .site-footer {
background-color: #000000;
font-size: 16px;
padding: 40px 0;
text-align: center;
width: 100%; /*new*/
bottom: 0; /*new*/
position: fixed; /*new*/
}
NOTE
If you want all black region, then you should change your HTML, and move all your black region in order to have one positioning container fixed
I have added a logo next to my menu bar, but anytime I minimize the browser window it moves and juts behind the menu tabs. I would like it to stay put no matter the size of the browser window.
Here is my HTML code for the logo:
<div class="headerlogo"><img src="http://passionpreneurenterprises.com/kerrizane/wp-content/uploads/2014/06/kerrizane2-small3.jpg"></div>
Here is the CSS speaking to the logo (I am using Thesis 1.8.4 so that's why the .custom is included):
.custom .headerlogo {
width: 236px;
margin-left: 160px;
margin-top: 0px;
position: absolute;
top: 5px;
left: 0px;
}
Also, here is the CSS code for the menu bar that is next to the logo:
.custom .menu {
margin-top: -474px;
margin-left: 165px;
width: 950px;
margin-bottom: 11px;
}
And here is the CSS code for the header image that is below the menu and the logo:
.custom #header_area {
background: none repeat scroll 0 0 #03989c;
height: 100px;
margin-top: 475px;
}
.custom #header_area .page {
background:transparent;
}
.custom #header {
background:url('http://kerrizane.com/newsite/wp-content/uploads/2013/10/Kerri-Zane-Header.png') no-repeat center transparent;
width: 1265px;
height:400px;
padding-top: 0px;
margin-bottom: 26px;
margin-left: -140px;
border-bottom:0;
}
Here is a link to the site: http://passionpreneurenterprises.com/kerrizane/about-kerri/ if your browser is maximized, you'll see the logo on the top left and the menu to the right of it. But if you minimize your browser window, you'll see that the logo moves and sits slightly behind the menu, which is not what I want. If I can find a way to make it stay put, that would be ideal. Thanks for any help you can give.
UPDATE: I see what was happening, when I was signed in and viewing the site, the admin toolbar was across the top of the site and making things look off when I was trying to position them. So I've removed the admin toolbar and put the logo where it's supposed to go....
BUT, there's still a problem. When I view it on my PC without the admin tool bar, here is how it looks:
The picture above is how it's supposed to look. But when I view it on my phone, here is how the logo appears:
Any suggestions on how to fix this? I have also updated the CSS code of the logo to depict the recent changes I made. Thanks.
Your current page seems to be different than the code you've posted, but see if this helps.
Most smartphones will try to scale images so they fit the screen, so if this isn't giving the result you want, you want to override this default behaviour and tell the smartphone what to do.
Try editing the CSS for your header image to something like
#teaser-image{
margin:0 0 10px 0;
width:90%; /* force image to scale on narrow viewports. to get the results you want, play with this percentage and or the margin values above or a margin on the page */
max-width: 1265px; /* set max width for image */
}
Good luck!
I ended up finding an answer to this in another forum. I needed to adjust my .headerlogo CSS code to include "position: relative" instead of "position: absolute" (the "position: absolute" was part of the original CSS I posted above in my question). Wanted to share in case anyone else came across this problem. The corrected code I used is as follows:
.custom .headerlogo {
height: 71px;
position: relative;
top: -240px;
width: 200px;
}
I was experimenting with text scrolling over a limited fixed background image (not sure what it's called exactly - where it's like parallax scrolling but the background image doesn't move at all?) and everything's fine except that I'm getting a small (5-10px) margin or padding between the bottom of the "upper" image and the bottom of the background image.
The bottom margin and bottom padding are both set to 0px (I've also tried it at 0%, with no improvement). I've also tried both negative margins and negative padding, neither of which had any effect either.
I tried a simple CSS reset, which solved a separate issue with unwanted side margins, but this problem persists. (And it's the same in every browser.)
I'm sure I'm missing something very simple, but I haven't found an answer for this exact problem. Any insight is greatly appreciated.
*
{
margin: 0px;
padding: 0px;
}
#text_and_image
{
text-align: center;
font-family: 'Montserrat Subrayada', sans-serif;
background: url(/images/fountain.png);
background-attachment: fixed;
background-size: 100%;
padding-top: 25%;
padding-bottom: 0px;
margin-bottom: 0px;
background-repeat: no-repeat;
}
The HTML:
<div id="text_and_image">
<p>this is the third one<br>it has both TEXT<br>and an IMAGE</p>
<img src="/images/bird_palm.png">
</div>
It is hard to tell without your image dimensions but I imagine the background image is being contracted or expanded due to the background-size: 100%; in the css. Set both of the images to the same width and see if the problem persists.
I'm looking to have a full page image with a section of the image that, when hovered over, changes the image to a colored version of the original black & white image. I tried doing this with image maps & onMouseOver, but didn't have any success. There are only two images being used, a color and a black and white one.
I just want to have it so that when you hover over a section of the black and white image, the whole thing turns to the color version, and onMouseOut reverts back to the black and white. I'm using this as a splash screen for a blog and the hovered section will serve as a link into the site.
Thanks for the help
If you don't mind your hover area being "square" then using pure css this should work (note, replace the background colors with your appropriate image and the border on the a is just for illustration). Tested in Firefox, IE7, IE8:
HTML:
<span class="img"></span>
CSS (EDITED FOR IE7-8 BUGS):
body {
margin: 300px 218px 178px 400px; /*see explanation below css*/
width: 22px; /*total width of a tag including padding and borders*/
height: 22px; /*total height of a tag including padding and borders*/
}
a { /*warning, do not give this position: use margin to position it*/
width: 20px;
height: 20px;
display: block;
border: 1px solid red;
overflow: visible;
/*deleted margin from this: moved to body*/
}
a span.img {
position: absolute; /*this gives it block display by default*/
top: 0;
left: 0;
z-index: -1;
background-color: yellow; /*bw image here*/
width: 640px; /*image width*/
height: 500px; /*image height*/
}
a:hover span.img {
background-color: blue; /*color image here*/
}
/*deleted the a:hover span.img:hover as it was not needed after all*/
Of course if IE6 is a concern, then you need to do something with javascript for it to recognize the span:hover.
ADDED ON EDIT: I discovered that the a tag would hover sometimes outside of the defined area for the IE browsers. To avoid that, the body must have margins placed on such that the left and top position the a tag, and the right and bottom must make up the difference in the image size minus the total width of the a tag.
I am trying to write a CSS in which when the user writes text and it overflows instead of having a scrollbar or hiding, it just goes down like in a normal Word Document or so. I have this code:
#content-text {
width: 960px;
padding-left: 10px;
padding-right:10px;
text-align: left;
color:#000;
height:100%;
margin-left: 25px;
margin-right:25px;
}
The odd thing, is that while this code actually does what I want in IE in Firefox it overflows and becomes a scrollbar. I've tried overflow:auto; overflow:hidden; and overflow:inherit; just to see if any helped but no luck so far, and I honestly have no idea of why is this happening in Firefox, =/ would any of you know?
Update:
I tried with overflow:visible; but I just get the overflow...well visible but still it doesn't wraps. and ONLY in Firefox so far. =/
Update:
The only other thing that could be affecting is that I have another CSS code and the first is contained:
#content-title{
background-color: transparent;
background-image: url(../img/content-title-body.png);
background-repeat: repeat-y;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
height:auto;
position:absolute;
z-index :100; /* ensure the content-title is on top of navigation area */
width:1026px;/*1050px*/
margin: 160px 100px 5px 100px;
overflow: visible;
top: 55px;
}
and the HTML that uses this is:
<div id="content-title">
<div id="content-text"> Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!
</div>
</div>
So your css is probably fine. For example on my page I have css is like this:
textarea.input_field2 {
margin: 10px 10px 10px 0px;
width: 440px;
height: 150px;
background:#696969;
color: white;
border: none;
font-size: 14px;
text-align: left;
vertical-align: middle;
}
Then in the body I call it up like this:
<textarea rows="9" cols="9" class="input_field2" name="user_comments"></textarea>
It works fine.
But make sure when you test it you test it with something like Lorem Ipsum, words with spaces and not one long string like 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' cause that will force a scroll bar probably. Also check your html and css for validation.
Try: overflow: visible.
There must be more to the story than you are showing here. I used the CSS provided and I am seeing the same behavior in both Internet Explorer and Firefox. The page is rendered 960 pixels wide and when the browser width is less than this, a horizontal scroll bar is rendered.
If you specify a width on an element, the browser is not going to render it less than this value. If you remove the width declaration from your example, the element will only render as wide as it needs to.
If this is not the answer you are looking for, please provide more code to give us the whole picture.
Add word-wrap: break-word; to your #content-text