In a smaller browser window the css moves in Safari It appears to look fine in other browsers except Safari
Take a look at http://tinyurl.com/mvkkcfg? In Chrome the Firefox - Then compare in Safari
I just need the OR image to stay in the same spot no matter what browser or window size is used
here is the code that Im currently using
<div style="z-index:10; position:absolute; margin-top:400px; margin-left:335px">
<img src="http://173.83.251.7/~iworeitb/wp-content/uploads/2013/06/or.png" alt="" />
</div>
Just tried option 2
I changed the code to as follows still no luck on a good position any other suggestions?
<div id = 'O' style="z-index:10; position:absolute; margin-top:20%; margin-left:18%">
<img name="" src="http://shopiworeitbe.../2013/08/or.png" alt="" /></div>
#O{
height: 100%;
max-height: 100%;
overflow: auto;
width: 100%;
http://tinyurl.com/mvkkcfg
Still not accurate
Please help thanks
You will have better luck using pixels or ems as opposed to percentages.
Percentages are dynamic and depend on the viewport whereas pixels and ems are static values and will deliver desired results.
Related
My web application is only required to support modern browsers (IE starting at 10). But it has to be fully responsive, so it should look good on all possible display sizes and resolutions.
It has the standard logo in the upper left corner, which is linked to the start page. I want to use an SVG logo, which should look good at any resolution. At first, I had the logo in a normal <img> tag, with height and width specified in css.
<a href="#Url.Action("Index", "Home")" id="Home">
<img id="logo" src="~/Content/images/mitoLogo.svg" />
</a>
#logo {
height: 3em;
width: 9em;
margin: 0.3em 1.5em 0.3em 0.2em;
}
Sadly, IE cannot work with that and clips the logo instead of stretching it to the given size. So I looked around and found this suggestion for placing an SVG image in a page. What I have now is
<div id="logo">
<a href="#Url.Action("Index", "Home")" id="Home">
<object height="100%" width="100%"
data="~/Content/images/mitoLogo.svg" type="image/svg+xml">
</object>
</a>
</div>
This displays the image properly in both IE and Firefox (haven't tried other browsers yet), but the link only works in IE. Neither in IE nor in Firefox does the cursor change to a clicking hand, and FF with AdBlockPlus shows a "block" suggestion on hover, possibly because this is an object tag.
Is there a way to display the SVG image correctly everywhere, while preserving its link function? I'm not limited to css, but can do radical changes to the markup, if needed, and I can also change the SVG source.
I played with your initial code a bit and got it working... it seems that you need to only set the width as a percentage and it will scale the height appropriately.
#logo {
width: 25%;
}
Try changing the percentage and adjusting the result window size in the JSFiddle Demo
I tested it in IE10 (+ IE9 in the emulator) and Chrome and it worked exactly as expected.
I created some pages to display a simple picture gallery, just the picture in the middle with next and back to click on either side of it. The picture sizes average about 800X1050, which fit great on my 1920X1200 monitor. What I needed was a way to automatically resize the picture to the browser height for use on smaller monitors, and I managed to get that to work after much searching on this site and others. I tested this on my wife's laptop and was happy with the results. However, when I tested it at work on our IE8 browsers (don't ask me why...), it doesn't work. Some of the people I will be sharing this gallery with will have to view it on our woefully outdated computers, so I've been trying the past couple of days to get it work and I can't. Here's the sample code I currently have for each of the gallery pages. There could very well be some unnecessary / redundant bits as I cobbled this together from many sources. Any help for this problem, and possibly even any improvements would be greatly appreciated!
<html>
<title>Picture Gallery</title>
<head>
<style>
.numbering {
vertical-align: top;
}
img {
max-height: 100%;
vertical-align: middle;
}
</style>
</head>
<body bgcolor="silver">
<center>
<img src="10.png" class="numbering">
<img border="0" src="back.png">
<img src="picture.jpg">
<img border="0" src="next.png">
<img src="spacer.png" class="numbering">
</center>
</body>
</html>
As the Max-width property works in ie8, Use width: inherit; to make it work with pure CSS in IE8.
like this
img {
width: inherit; /* This makes the next two lines work in IE8. */
max-width: 100%; /* Add !important if needed for the code to work. */
height: auto; /* Add !important if needed. for the code to work */
}
I've on my site I've got two images inside their own parents divs (the full structure for each is div a img). The divs have fluid heights (height: 10%;). The images within are set to max-height: 100%;. The images size properly within Webkit, but every other browser seems to have problems with one or both. I've tried searching for possible solutions, but I can't even begin to imagine what the cause even is.
Since it's probably easier to just show you guys, here are the relevant pages and files:
Main page (the center logo image and the "CRASH" logo at the bottom)
CSS (the relevant divs are .logo and .crash)
Below is a breakdown of what I'm seeing. Thanks for any help!
edit: Never actually mentioned what the undesirable result was. In the browsers where it's broken, the images display at 100% -- not at 100% of the parent container, but at the full size of the image itself, breaking out of its container. Hope this clarifies things!
Browser / DIV | .logo | .crash
chrome 22 | works | works (same results on my friend's copy of Safari)
opera 11.61 | broke | broke
ie 9 | works | broke
firefox 12 | works | broke
I figured out it using Firebug in firefox 15.0 and got a solution, Hopefully it will work on all browsers.
1. Remove css rules defined for #footer and add those rules in .crash like below:
.crash {
height: 10%;
position: absolute;
text-align: center;
top: 82%;
width: 100%;
}
2. Add the following rules:
.footerNav {
position: absolute;
text-align: center;
top: 92%;
width: 100%;
}
3. And in .mod-languages replace existing styles with given below:
.mod-languages {
position: absolute;
text-align: center;
top: 96%;
width: 100%;
}
Additional Notes:
Your HTML structure is looking like this:
<div class="moduletable">
<div class="custom">
<div id="logo">
<a href="http://www.millioncranes.com">
</div>
</div>
</div>
So when you wrap moduletable with #footer like below:
<div id="footer">
<div class="moduletable">
<div class="custom">
<div class="crash">
<a title="CRASH Japan" href="http://crashjapan.com">
<img src="/images/crashlogo.png">
</a>
</div>
</div>
</div>
.. /*Another moduletable*/
.. /*Another moduletable*/
</div>
This causing a problem. The style of #footer applying on all moduletable elements inside #footer. So do not need to wrap these elements inside footer. Style your elements like you have styled for #logo, That's it!
Hopefully it will fix your problem in all browsers.
I'm afraid I only have a chromebook here, so I can't test on any non-webkit browser, but here's my guess:
For the rendering engine to know how to apply height: 100% it has to know for sure the height of the container element. People have wrestled with 100% height for a long time.
First, I would make sure your a is display: block so that the img definitely knows how high its container is.
Then I would play around with setting explicit heights for the imgs container elements, and see if any of those fix it - then when you know what the problem is you can find a solution. Hopefully.
Let me know how you get on.
Not all browsers support max-height; see http://caniuse.com/#search=max-height
You don't really say what aspect of the result you don't like: what exactly is the difference between what you expect to happen and what actually happens?
I want to place a transparent .png image exactly over another image, lets say .jpeg
Here is my code:
<img src='someimage.jpg' width='480px' height='360px' />
<img src='someother.png' style='margin-top:-360px;margin-left:0px;position:absolute;border:none;' />
It works fine in Chrome,Safari and maybe new versions of Firefox. In older versions of Firefox, and in all versions of IE it won't work - instead the transparent image is shown to the right, above the .jpeg image.
Can anybody give me a fix to this?
Here's a much easier way to ensure the images are on top of each other:
<div id="image-combo">
<img src="someimage.jpg" style="width: 480px; height: 360px" />
<img src="someother.png" style="width: 480px; height: 360px" />
</div>
And here's the CSS:
#image-combo {
position: relative;
width: 480px;
height: 360px;
}
#image-combo img {
position: absolute;
top: 0;
left: 0;
}
I do not believe this is a browser issue. This is a window size issue...
You really have two 480 pixel images next to each other so it depends on how wide you have your browser window.
If your window is less than 960 pixels wide, your code works because the second image wraps to the line under the first image.
If the window is more than 960 pixels wides, your code will not work and fails as you describe because the second images simply sits to the right of the first. Your code moves the second image up so the second one will be on the right and the negative margin moves it up the exact height of the first image.
A quick fix would be to insert a line-break <br /> between the two images to insure the second image is always below the first image. Also there is not supposed to be "px" in the img properties of width and height, so remove those.
<img src='someimage.jpg' width='480' height='360' /><br />
<img src='someother.png' style='margin-top:-360px;margin-left:0px;position:absolute;border:none;' />
There are probably more elegant solutions out there, like using container <div>'s, but without seeing the context of the rest of your code, it's impossible to say what would be best.
UPDATE
It seems to have magically corrected itself because now it works, but I emphasize that it wasn't a cache issue because even I was able to update with new images but they always appeared "below" rather than "next to"... I don't understand...but suddenly it worked now.
if you check www.dodomainer.com in Safari and Chrome, the two images in the header float, but not in Firefox. Any idea how to fix this? Note, it's definitely not this way in Firefox as a result of a cache
this is the code that I use. Any idea how to fix the problem?
<div class="header a"><a href="http://dodomainer.com/">
<img src="http://dodomainer.com/images/dodo4.jpg" width="400" height="50" padding-left="10px" alt="dodobird" />
</a></div>
<div class="header b">
<a href="http://dodomainer.com/">
<img src="http://dodomainer.com/images/dodotest.jpg" width="380" height="70" padding-left="10px" alt="dodobird" />
</a>
</div>
CSS
.header {
float: left;
width: 400px;
}
.a {
height: 50px;
}
.b {
height: 70px;
padding-left: 100px;
}
There is no problem to be fixed here.
Your code should work in all browsers. I checked in IE, FF, Opera (all latest though). All good.
There are just 2 child divs with float:left.
Michael, i feel like you may have an overflow issue here regarding your padding and the various methods browsers compute the box model. Header A has a width of 400 but an image within of 400+the padding. Remove the padding or resize it's container to actually contain it. Other option is to set overflow to hidden
This looks fine in my FF and other browsers.
However, you may want to reduce the padding in
.b {
height: 70px;
padding-left: 100px;
}
That could be causing you problems.
EDIT:
The original problem may have disappeared because of padding-left:10px; that was added inline to the img. If that is removed, you may experience the problem again.