Since I have this problem third time in row I need to know this:
Why is IE8 not showing the logo in the top left of this site??
The image is wrapped in a header > h1 > a
This is so strange, since apparently only IE8 has this problem!
Get rid of the max-width: 100% in the CSS style for the img tag, or clear it for that specific element.
Related
I created a site, http://www.samenwerkendepsychologenamsterdam.nl/
It works fine, the CSS + HTML is not great but it works.
Either way, for the header (the big image) I created an empty fixed size div with a background image.
HTML:
<div id="header"></div>
CSS:
div#header {
content:url('images/header1.jpg');
width: 900px;
height: 193px;
margin-top:57px;
}
The images appear fine in Safari, Chrome, etc., but not in Firefox.
Help would be greatly appreciated. Thanks in advance.
Try background instead of content
The CSS content property is allowed only with the ::after and ::before selectors. You should use background-image instead of content in your stylesheet.
I need to add a text on each of the image and I have the image gallery constructed using img tags. Can't I append div tags under img tags. Similar to the one shown here :
<img id="img1" class="img1_1" src="hello1_1">
<div class="textDesc">HELLO1_1</div>
</img>
Though the div is appended to img tag , but I cant see the text "HELLO1_1" on the image.
Please can anyone help me?
If you need the source code I can share it with you.
Here is the link to test the scenario :
http://jsfiddle.net/XUR5K/9/
An image tag can not have child elements. Instead, you need to position the DIV on top of the image using CSS.
Example:
<div style="position: relative;">
<img />
<div style="position: absolute; top: 10px;">Text</div>
</div>
That's but one example. There's plenty of ways to do this.
The img element has a self closing tag, so you can't give it child elements and expect it to work. Its content model is defined as empty. Source.
I suspect any children you specify won't be rendered because an img element is a replaced element, as mentioned in the W3C spec.
Rules of good tone.
Use null source in IMG tag.
Use CSS content:"" for WebKit browsers.
Insert element through JavaScript. Clear in HTML does not affect.
Also you can use pseudo elements.
Example: https://github.com/Alexei03a/canvas-img
Im trying to create a horizontally scrolling gallery but I would like to avoid defining the width on the div. Someone else is touching the html - I want her to be able to drop in as many li as possible without having to touch the css and redefining the width.
The mock site is here: rachelbeen.com/Carmen.
Safari recognizes where the content ends and stops the horizontal scroll - but firefox maintains that extra space as defined by the width:6600px; on the #gallery ul. How do I stop that from happening?
Would like to avoid plugins if possible and use only CSS.
Thanks,
-Rachel
I had the same problem and I tried this:
#full{margin:0 auto; overflow:auto; height:100%; width:1050px;}
// width is just for controlling the viewport.
#holder{float:left; margin-right:-30000px;}
.box{float:left; margin:2px;}
and HTML should be like:
<div id="full">
<div id="holder">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
</div>
</div>
add many DIVs as you want and it'll make more space for you boxes without giving it a specific width. I hope it helps you.
If you have an element following another element that has float:left and turn on contenteditable in IE8, the following element will be precedet by an empty line in IE8 if you turn contentEditable="true".
An example:
<img src="foo.jpg" style="float:left">
<p>Some random text</p>
in IE8 this will be rendered like this:
See the line before "Some random text"?
This is especially annoying if you use a wysiwyg-editor because this affects some of its functionality. Also, this creates markup you don#t want. In CKEditor, you can see that the dom-path of that line is in the body, not inside any element.
I reported that problem to Microsoft some time ago and they didn't want to fix it: https://connect.microsoft.com/IE/feedback/details/576042/floated-elements-in-contenteditable-can-generate-an-empty-line
The last time that I checked with IE10 pp2 still had the problem.
Manually setting the css of paragraph elements with:
p {margin-top:0;margin-bottom:0}
should resolve this issue.
Hello
I built a website for a graphic design company (www.brgdonline.com) and used the tag. The webpage will not show up at all in Chrome, Firefox, or IE. However, if I remove the doctype completely, it shows up fine. I have validated the website using w3's validator and got no errors. I can see the source code just fine even when it doesn't render.
Thanks so much in advance.
RMS
The div with id #whole has height:100% and overflow:hidden. The height is set to 100% of body which has no height defined and therefore becomes 0. Remove height:100% and overflow:hidden from #whole and I think it will render again.
alternatively give body and html a height:100% so they fill the whole viewport height.