I have the following code.
I cannot understand why after the image (videoCmera_icon.png) it puts and underscore.
I find that this happens only when I have
style="display:inline;
Here is the code:
<div id='HomeVideo1' style="display:inline;">
<a href="#">
<img src="images/videoCamera_icon.png" border="0">
</a>
<a href="#" style="text-decoration: none">
<span class="text3">View Video</span>
</a>
</div>
Inline elements will respect whitespace between their child elements. So the whitespace between the <img> and the closing </a> tag shows up as a space (with an underline because it's part of a link).
Removing the whitespace between the <img> and its <a> tags helps:
<div id='HomeVideo1' style="display:inline;">
<img src="images/videoCamera_icon.png" border="0" />
<span class="text3">View Video</span>
</div>
http://jsfiddle.net/5abbx/
Related
I would like my div be clickable. but I have tested multi ways that is possible, but it doesn't work fine :
<a href="https://www.telegram.me/shadyab_deal">
<div id="mob_link" class="home_right_banner_mob">
<img width="360px" height="130px" src="http://www.shadyab.com/assests/images/ic_mob_telegram.jpg"/>
</div>
</a>
Your html is wrong Please used to this
and define your a tag display inline-block;
a{display:inline-block;vertical-align:top;}
<a href="https://www.telegram.me/shadyab_deal">
<div id="mob_link" class="home_right_banner_mob">
<img width="360px" height="130px" src="http://www.shadyab.com/assests/images/ic_mob_telegram.jpg"/>
</div>
</a>
2nd option is your can used to this valid HTML
#mob_link a{display:block;}
<div id="mob_link" class="home_right_banner_mob">
<a href="https://www.telegram.me/shadyab_deal">
<img width="360px" height="130px" src="http://www.shadyab.com/assests/images/ic_mob_telegram.jpg"/>
</a>
</div>
Wrapping block level elements with links is allowed in HTML 5. Just do this.
<a href="https://www.telegram.me/shadyab_deal">
<div id="mob_link" class="home_right_banner_mob">
<img width="360px" height="130px" src="http://www.shadyab.com/assests/images/ic_mob_telegram.jpg"/>
</div>
</a>
I've coded http://www.meghanbustardphotography.com/home/ and have linked each image to a different page (html code below). However, only the first link in each row is functioning. How can I fix this?
<div class="row" class="aligncenter">
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/09/colin-karlee-abbotsford-backyard-wedding/">
<div id="colinkarlee"></div>
</a>
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/09/andrew-rebecca-whytecliff-park-engagement/">
<div id="andrewrebecca"></div>
</a>
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/05/justin-hilary-south-bonson-wedding-2/">
<div id="justinhilary"></div>
</a>
</div>
<div class="row" class="aligncenter">
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/07/greg-amanda-beach-grove-wedding/">
<div id="gregamanda"></div>
</a>
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/10/cory-nicole-fort-langley-little-white-house-wedding/">
<div id="corynicole"></div>
</a>
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2013/09/mike-renae-whonnock-lake-portraits/">
<div id="mikerenae"></div>
</a>
</div>
<div class="row" class="aligncenter">
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/08/david-gastown-portraits/">
<div id="david"></div>
</a>
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/09/brent-stephanie/">
<div id="brentstephanie"></div>
</a>
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/08/sean-brittany-langley-golf-centre-wedding/">
<div id="seanbrittany"></div>
</a>
</div>
By taking a look at your real page, only 1st column has < div > inside < a >< /a >
<a href="http://www.meghanbustardphotography.com/blog/2014/09/colin-karlee-abbotsford-backyard-wedding/" target="_blank">
<div id="colinkarlee"></div>
</a>
For 2nd and 3 column, I see the < div >(s) are outside of < a >< /a >. That's the reason why they are not clickable
<div id="andrewrebecca"></div>
<div id="justinhilary"></div>
Put <div id == ... >
INTO <a target .. /a>
I did it and the links worked after that.
I can provide pictures if you don't know what I mean
You have a bunch of <p> links in your view page source code that do not have closing </p> tags associated with them. Try taking those out and see if that helps.
Also, check out the order of the <a> and <div> tags in your actual code. They're not matching what you pasted in your question.
I think it might wordpress not processing/showing your HTML directly. Try these:
https://wordpress.org/plugins/insert-php/
https://wordpress.org/plugins/allow-php-in-posts-and-pages/
In Chrome image and the text link is aligned properly. However, when I check it on IE8, I noticed that image and text link is not align properly.
Here is the code I use. this is a code I use in Wordpress wpfilebase templates.
<td style="width:350px;padding-left:20px;">
<a href="%file_url%">
<img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" />
</a>
<span style="width:200px;float:right;vertical-align:text-top;">
%file_display_name%</span>
</td>
Chrome renders properly, but not IE. How to fix this? If I need to use conditional CSS for IE, what is the correct code for IE?
Your 'span' tag closes before you close your 'a' tag. Corrected Code:
<td style="width:350px;padding-left:20px;">
<a href="%file_url%">
<img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" />
</a>
<span style="width:200px;float:right;vertical-align:text-top;">
%file_display_name%
</span>
</td>
Try this,
<td style="width:350px;padding-left:20px;" valign="top"><!--use valign top here -->
<a href="%file_url%">
<img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" alt="img" />
</a>
<span style="width:200px;padding-left:10px;vertical-align:text-top;"> <!--remove float and add padding here-->
%file_display_name%<!--anchor tag should be closed here-->
</span>
</td>
Use padding-left in span element and remove float property from it.
Using div tag instead of span, solved my issue.
<td style="width:350px;padding-left:20px;" valign="top"><!--use valign top here -->
<div style="float:left;"><a href="%file_url%">
<img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" alt="img" />
</a></div>
<div style="max-width:200px;padding-left:10px;vertical-align:text-top;"> <!--remove float and add padding here-->
%file_display_name%<!--anchor tag should be closed here-->
</div>
</td>
I have an instance of CKEditor running to edit small parts of a website. The original HTML is:
<div class="slide slideleft">
<a href="#" class="slidelefta">
<img src="img/left.png" alt="previous" />
</a>
</div>
<div class="slide slidemid noauto" style="height: auto; text-align: center;">
<a href="#" class="sliderighta">
<img src="img/main_item.png" alt="item" />
</a>
</div>
<div class="slide slideright">
<a href="#" class="sliderighta">
<img src="img/right.png" alt="next" />
</a>
</div>
now, when I load it into CKEdit (inside a <textarea>, all correctly encoded with PHP's htmlspecialchars() method), it replaces all my carefully crafted DIVs and styles with the following:
<p><img alt="previous" src="img/left.png" /></p>
<p><img alt="burg.ring1" src="img/main_item.png" /></p>
<p><img alt="next" src="img/right.png" /></p>
which of course totally ruins the page's layout. Can CKEditor somehow be set to not do that?
Thank you!
Since CKEditor 4.1 the Advanced Content Filter feature is enabled. You need to configure it in order to have your HTML passing the validation. See my previous answer here: CKEditor strips inline attributes.
<a href="service.html">
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Sea Freight.png"/>
</a>
<a href="airfreight.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Air Freight.png">
</a>
<a href="projectcargo.html">
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Project Cargo.png">
</a>
<br/>
<a href="customclearance.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Custom Clearance.png">
</a>
<a href="transportation.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Domestic Transportation.png">
</a>
<a href="thirdparty.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Warehousing and Distribution.png">
</a>
</br>
<a href="coastalcargo.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Coastal Cargo.png">
</a>
<a href="veseelchartering.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Vessel Chertring.png">
</a>
</br>
I have create button by using img tag within anchor.
why I am getting small dash at right corner??
thanks in advance
There is a default text-decoration:underline associated with an anchor <a> tag. Since there is a space in the <a> </a>, that underline is the line you see.
Use text-decoration:none on <a>, that should solve it.
a {
text-decoration: none;
}
This appears to happen when:
the closing anchor tag is on a separate line from the rest of the element
AND the visible text of the anchor is an image
AND you have multiple images on the same line
and also the anchor/image is not the last item in the horizontal series
In the following example, you will not see dashes after the third and fifth images, but the other images will show a dash to the right of the image/link:
<p>
<a href="#">
<img src="image.jpg" alt="Test 1" />
</a>
<a href="#"><img src="image.jpg" alt="Test 2" />
</a>
<a href="#">
<img src="image.jpg" alt="Test 3" /></a>
<a href="#"><img src="image.jpg" alt="Test 4" />
</a>
<a href="#"><img src="image.jpg" alt="Test 5" />
</a>
</p>
I can't find any information to say if this is a violation of an HTML rule regarding splitting elements across multiple lines. I replicated the same issue in Chrome, Firefox and IE 11.
I can only guess that a space is being added after the image, since the closing tag is on a separate line. And this relates to the answers given above - the space is being automatically styled with an underline. But I don't know why the space is added after an image but not after text, or why this only happens when the images are on the same line.
<a> is an inline element. If you leave space between enclosed elements and the </a> element, it will be formatted automatically which is with an underscore.