i have this HTML Code:
<div id="header-small">
<img src="/images/logo.png" width="294" height="41" />
<p> </p>
<p align="center">Tel: <?php echo $main_phone_number; ?><br />Email: <?php echo $company_emailaddress_sales; ?></p>
<p> </p>
</div><!-- header-small -->
and CSS:
#header-small {
display:block;
text-align:center;
margin-top:20px;
}
for some reason, its not displaying the image on an iphone :/
any ideas what it could be why its not displaying - im just getting an outline box
Yes, I have experienced this before. You get a black outline instead of an image? Like Flowen said, it is due to your image being too large. It will probably work on android devices and if I remember correctly windows phones also had some variation of border or other issue with large images.
Hopefully resizing the image should fix this for you.
edit: sorry new to this, thought it would add with the comments.
Related
I wasn't too sure how to word the title as its a rather obscure issue.
Essentially if you go to http://www.discovertheplanet.net click on one of the 3 boxes and if you are on firefox you will see the issue. If you view on IE or Chrome the menu on the left hand side is in the correct position, however on Firefox it starts way down the page.
I have viewed the console and there were a few CSS errors referring to the bootstrap.css. I have been on the Bootstrap website for known issues with firefox but there was nothing relevant.
My HTML for the main are where the menu is:
<!-- Main Body Area -->
<div class="main-container-notes">
<div id="left-box">
<?php
echo "<div style='width: 100%; display: table;'>";
while( $noteName = sqlsrv_fetch_array( $resultNotes, SQLSRV_FETCH_ASSOC))
{
echo "<div class='hvr-bounce-to-right1 hover-cursor' style='width: 100%; border-right: 5px solid #00AA88; height: 50px;'>" . $noteName['NoteName'] . "</div>";
}
echo "</div>";
?>
</div>
<div id="right-box">
</div>
</div>
<!-- End Main Body Area -->
Ive just included my whole CSS File here so you can see all the classes
There is one for the Animations and One for General Styles
Like i said its rather obscure and im not sure what extra info you require,
Please just ask and i can provide you with it.
So i ask, why is this only happening in Firefox?
the .main-container-notes height is causing this
try removing it
Try to add this code:
#left-box {
vertical-align: top;
}
In my firefox it resolved your issue =) And this solution allows you to keep the height of .main-container-notes 1000px or whatever you want
http://www.thirdavenuespa.com/
Can someone please point me in the right direction for figuring out why this page seemingly shows 2 versions of the same content? When viewed on a mobile device you will see the content repeated, once in proper mobile formatting and then again as the desktop version.
This is from the main header image down to the "Aveda" logo.
If I add some test text to that section, it only shows in the mobile formatted version, and the desktop version just stays the same. There is only one copy of this content in the page!
<!--banner-->
<div class="banner">
<img src="images/banner.jpg" width="1200" height="698" alt="">
<div class="banwrap">
<div class="container">
<div class="baninfo">
<h1>Refined <span style="font-family: 'Montserrat', sans-serif; font-weight: regular;">&</span> Distinct</h1>
<div align="center"><p style="font-size: 20px;">stimulate . nurture . educate</p></div>
</div>
</div>
</div>
</div>
<!--banner ends-->
This is just one of you're instagram photo's pulling through from you're instagram feed. It looks a little strange, just because it's a photo of the desktop version of your site.
In your image gallery there is an image of the website. A screen shot. That's what is making it appear as the site is repeated. You have the site. Then a photo of the site.
I have a piece of text that I am trying to change the font color for on my site. The code is showing up correctly and I have read some other forums and tried to modify the code myself using HTML font color and PHP style but I can't seem to get it to work.
I am not a programmer myself, so I am most likely making some kind of rookie mistake. The code currently installed on the site is below:
<div style='text-align:center'>
<?php
ini_set('default_socket_timeout', 3);
echo file_get_contents('https://www.mysamplesite.com');
?>
</div>
I actually do not care if it is center aligned or not if I can get it to show up in white font, but I can't seem to be able to get it to show in white font.
When the sample code loads it brings back certain text that displays on the front of my my site. Can someone please tell me how to format this code properly to get it to show in a color of font of my choice? Your help would be greatly appreciated. Thanks!
All you need to do is a add a color declaration:
<div style='text-align:center; color: #FFFFFF;'>
Keep in mind that any inline style tags may overwrite the parent's style properties.
Try this code.
<div class="code">
<?php
ini_set('default_socket_timeout', 3);
echo file_get_contents('https://www.mysamplesite.com');
?>
</div>
<style>
.code, .code *
{
color: #FFFFFF!important;
}
</style>
I'm working on a responsive website and my there is extra space after my main image:http://juddbuilders.com/www/
I cannot figure out what is causing this extra space. Even if I take out the nav/all class styles on the photo the space remains between between the photo and .
Could someone please help me? Thank you!
<div id="wrapper">
<?php include('includes/header.php'); ?>
<img class="fluid-img" src="images/header-photo.jpg" alt="Plan Your Home" width="1140" height="400"/>
Just add to ur CSS.
.fluid-img{
display:block;
}
I am new to web building. Currently following a tutorial for making an image gallery.
http://www.webreference.com/programming/css_gallery/index.html
It all works okish (enough for me to fix things to my liking) apart from the thumbnail section. Below is a snippet of the html and css for the thumbnails which I think is relevant to the help I seek. Basically, when you hover over the thumbnail, the main image will appear in a free space in the page above. That kind of works (image doesnt appear in the right place, but I can fix that no probs) but the thumbnails are not displaying my images.
I changed the container div to "gallery" as I already have a container in my html, and dont want it to be affected by the new css following the tutorial...
html:
<li>
<a class="gallery slidea" href="#nogo">
<span>
<img src="images/Picture 014.jpg" alt="Wedding" title="Wedding" />
<br />
Wedding
<br />
Outside area wedding
</span>
</a>
</li>
CSS:
#gallery a.slidea {
background:url(images/Picture 014 thumb.jpg);
height:38px;
width:50px;
}
Also for my CSS, the W3C validator says " #gallery a.slidea " Value Error : background Parse Error thumb.jpg) which I dont understand.
Would love some help :D
Cheers
P.S I'm looking at putting this website onto wordpress (thats a tutorial I'll follow later on with more success I hope)
Your error is here:
background:url(images/Picture 014 thumb.jpg);
That space is throwing it off. Put the url in quotes:
background:url('images/Picture 014 thumb.jpg');
The other problem is in your HTML.
Your CSS says #gallery a.slidea
This would point at all links with the class 'slidea' that are in an element with the id of 'gallery'. Your HTML indicates that the link is of class 'gallery' and 'slidea'. The right way to do it would depend on your goals.
The call to the class doesnt match the name of the class
<a class="gallery slidea" href="#nogo">
is calling
#gallery a.slidea {
Try making them the same name, e.g.
<a class="gallery_slide" href="#nogo">
#gallery_slide a {