I'm working on a very simple website that is pretty much just HTML and CSS. The mock up I've made works well in Firefox but when I put it into chrome it does something weird. The the text I've put in a div tag is displaying under the end.
Here's the code, if you take it into chrome you should be able to see what I'm talking about.
HTML of Site
CSS of Site
It displays correctly if you set a height on the fishtank image.
<img src="./graphics/fishtank.jpg" width="1090" height ="10" />
JSFiddle
Is the fishtank image a background image? If so, you can put it as a background image in the parent div's CSS.
Related
To make it more simple, i'm working on this site https://webdev02.amontagnana.it/ and on the 4th row we can see a text block and an embedded video.
I need to make the video's height just like the block on the left. (it has to be relative too because it has to be responsive to desktop and mobile)
Your site are loading and loading
If you are cover an entire DIV . you need to fixed position and increase z-index as much as possible.
you can simply add a custom class on tatsu-column-inner and add the background color black on it
See the attached screenshort
The html code on the actual webpage
Hello. I am having some problems with pictures not properly displaying on a website. I have added the picture and created a div.tag for it and also added it to the CSS but it simply will not show properly. http://mala.co.uk/projects-sw-adelphi.html is one of the new webpages that I have added. http://mala.co.uk/projects-cat-a-eastcheap.html is a webpage with a picture being displayed properly. It is really baffling me why the new pages I have added have the pictures being cut off while the older pages render the pictures perfectly. The Eastcheap picture is how the size should be (more square) but new pages are showing the images more rectangular. Any help would be massively appreciated. Kind Regards
You have set a specific height for the large-6 columns divs. Changing that height has an influence on the image, as it is relative to the parent div container.
I am not sure how that height is generated or if you have hard coded that. It might also depend on the text on the right col, which will change the height of the left col.
Edit: I have edit your code in the inspector. It looks like that.
<div class="large-6 columns panel-container" data-equalizer-watch="" style="height: 450px;">
I created a slideshow using HTML and CSS. Everything works, but the images don't take up the full page. Here's what this looks like:
from the looks of your screenshot you have some padding and margin on the body and/or html tags.
But a link would work best in your favor.
I'm working on a html only webpage, and I am having some issues correctly formatting my social-media links. I have a fixed position div that is 48 x 190, and within it I'd like to put 4 different social media icons which link to their respective pages. I was able to set up the div correctly in css styling, and I was able to insert the images into the correct position just fine. However, as soon as I added the link tag to the image, it all broke. The formatting of the image seemed to change just by adding the link to it, and they now took up all this extra space around themselves, went outside the borders of the div, and refused to be properly centered. Why is adding a link to the image breaking the formatting in such a strange way, and how can I fix it so it remains formatted how I want even after the link is added?
Thanks!
have you set the border of your images to 0 ? When inside a link, browsers put a 1px border to images if this value is not set in the CSS.
If that is not the problem, posting your code (see jsFiddle for example) could help
I guess, the issue is related to the different size (in pixels) of icons, that cause to increase div and distrub the UI. I have also used Image-Links as following and it works fine. First ensure your icon size.
<a href="javascript: showPopup();" id="groupEdit" class="link">
<img src="/images/redPencil.png" title="Update">
</a>
I have a table that contains an image, but for some reason I cannot get certain images to center correctly. When I apply max-width:170px the image resizes correctly, but it does not center. In every other browser (even IE7) everything looks good, but IE8 chokes. Here is the FIDDLE http://jsfiddle.net/5VT7e/.
Note: I created the fiddle in Chrome, but went to view it in IE8 and I guess JSFIDDLE doesn't work in IE8. None-the-less you can view all the code ;)
Here's a screen shot of the problem:
Problem:
Desired:
First image looks okay
Second image is shifted to the right
Third image looks okay
Fourth image is shifted to the right
Fifth image is shifted to the right
Pretty much any image that max-width:170px effects is shifted to the right.
Thanks for having a look.
This answer provides two possible solutions:
Set width: auto on your images
Provide a width on the direct parent element of the images.