I'm facing an issue with Internet Explorer 11 (Version 11.0.9600.18204) on Windows 7. The website I'm developing seems to be having a problem displaying correctly:
However, the same error does not appear on Internet Explorer 11 (Version 11.0.9600.18205) on Windows 8.1:
Is there any way to fix this?
Edit: This is the CSS code in question:
div[Attributes Style] {
text-align: -webkit-right;
}
user agent stylesheetdiv {
display: block;
}
#footer {
clear: left;
margin-top: 1em;
margin-left: 0px;
margin-right: 0px;
background: #efefef;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0px;
height: 20px;
width: 100%;
}
div {
display: block;
}
for this piece of html code:
<div id="footer_container" align="right">
<div id="footer">
<b>
Impressum
</b><img id="j_id_t" width="10px;" height="" alt="" src="/ivy/faces/javax.faces.resource/spacer/dot_clear.gif?ln=primefaces"><b>|</b><img id="j_id_v" width="10px;" height="" alt="" src="/ivy/faces/javax.faces.resource/spacer/dot_clear.gif?ln=primefaces">
<b>
Datenschutzerklärung
</b><img id="j_id_x" width="10px;" height="" alt="" src="/ivy/faces/javax.faces.resource/spacer/dot_clear.gif?ln=primefaces"><b>|</b><img id="j_id_z" width="10px;" height="" alt="" src="/ivy/faces/javax.faces.resource/spacer/dot_clear.gif?ln=primefaces">
<b>
AGB
</b>
</div>
</div>
Please check the parent div-container and set:
position: static
This should avoid the perceived behavior.
Related
I am trying to create a website where there are four titles above four images and four descriptions below. For both the titles and descriptions, I have used/created two different tables. The images are placed accordingly using margins. The tables look good on my computer but when transferred to a larger screen they move to the left. I figured out that the way to make them compatable and look good on all larger screens would be to centre the tables. I have tried using align: centre for the table and including style="text-align: centre;" but neither have worked. How can I fix this problem. Thanks for any help in advance. It is greatly appreciated. Below is my current code:
.mobile_title {
margin-top: 25px;
font-size: 25px;
color: black;
margin-left: 105px;
font-family: 'Oswald', sans-serif;
}
.text_under {
font-size: 15px;
color: grey;
font-family: 'Oswald', sans-serif;
width: 150;
text-align: center;
}
.mobile {
margin-top: 30px;
margin-left: 160px;
}
.laptop {
margin-left: 140px;
margin-top: 45px;
}
.coding {
margin-left: 155px;
margin-top: 45px;
}
.database {
margin-left: 150px;
margin-top: 45px;
}
.load {
border-collapse: separate;
border-spacing: 130px 10px;
}
.kbg {
border-collapse: separate;
border-spacing: 155px 10px;
}
<body>
<table class="load">
<tr>
<td class="mobile_title">Mobile Development</td>
<td class="mobile_title">Web Development</td>
<td class="mobile_title">Backend Development</td>
<td class="mobile_title">Database Creation</td>
</tr>
</table>
<img src="mobile.png" width=160 height=120 class="mobile">
<img src="laptop.png" width=150 height=100 class="laptop">
<img src="coding.png" width=150 height=100 class="coding">
<img src="database.png" width=150 height=110 class="database">
<table class="kbg">
<tr>
<td class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.</td>
<td class="text_under">The creation of web-based sites using multiple programming languages including HTML, CSS, and Custom word press. These websites, after the creation stages, are hosted online for all to observe.</td>
<td class="text_under">The process and supporting information that websites need in order to perform wanted tasks. The information is written in codes, the process called programming.</td>
<td class="text_under">The location of storage of all of the supporting information. This also saves all important files including the back ends of developing websites and/or mobile applications.</td>
</tr>
</table>
</body>
as per my comment, using flexbox it is easier than tables.
.load-wrap {
display: flex;
flex-wrap: wrap;
text-align: center;
font-family: 'Oswald', sans-serif;
/*to center - optional */
width: 75%;
margin: auto
}
.load {
flex: 1;
padding: 20px;
box-sizing:border-box
}
.mobile_title {
margin-top: 25px;
font-size: 25px;
color: black;
}
.text_under {
font-size: 15px;
color: grey;
}
.mobile {
margin-top: 30px;
}
<div class="load-wrap">
<div class="load">
<div class="mobile_title">Mobile Development</div>
<img src="//placehold.it/160x120" class="mobile">
<div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
</div>
</div>
<div class="load">
<div class="mobile_title">Mobile Development</div>
<img src="//placehold.it/160x120" class="mobile">
<div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
</div>
</div>
<div class="load">
<div class="mobile_title">Mobile Development</div>
<img src="//placehold.it/160x120" class="mobile">
<div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
</div>
</div>
<div class="load">
<div class="mobile_title">Mobile Development</div>
<img src="//placehold.it/160x120" class="mobile">
<div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
</div>
</div>
</div>
Put your images in new row with each image in separated column, also do that for description text. And to center images use:
td img{
display: block;
margin-left: auto;
margin-right: auto;
}
For centering text add:
text-align: center;
In your .load class.
Here is your JSFiddle: https://jsfiddle.net/9c1p3fm6/
Edit: And yes, you need to delete all classes you attached to img elements.
I'm new in html and css so i have a question.
I am messing around with some stuff but after placing some images on my page i can't click on my links anymore.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Rijschool Houben</title>
</head>
<body>
<div id="header"></div>
<div id="header-pic"><img src="image/test.png"></div>
<p>
<div id="nav-bar">
<ul>
<li>|Home|</li>
<li>Info|</li>
<li>Prijzen|</li>
<li>Acties|</li>
<li>Machtiging|</li>
<li>Theorie|</li>
<li>Begeleid rijden|</li>
<li>Bromfiets|</li>
<li>Contact|</li>
</ul>
</div>
</p>
<p>
<div id="icon-main">
<i class="fa fa-mobile" style="font-size:28px;"></i><a>046-4524501</a><br />
<i class="fa fa-paste" style="font-size:18px;"></i><a>raymond#rijschoolhouben.nl</a><br />
<i class="fa fa-facebook-official" style="font-size:20px;"></i><a>Volg ons op Facebook!</a>
</div>
</p>
<p>
<div id="img-1">
<img src="image/1.jpg" alt="Scooter" width="330px" height="400px"/>
</div>
<div id="img-2">
<img src="image/2.jpg" alt="Geslaagde 1" width="337px" height="400px"/>
</div>
<div id="img-3">
<img src="image/3.jpg" alt="Geslaagde 2" width="337px" height="400px"/>
</div>
<div id="img-4">
<img src="image/4.jpg" alt="Geslaagde 3" width="337px" height="400px" />
</div>
<div id="img-5">
<img src="image/5.jpg" alt="Geslaagde 4" width="337px" height="400px" />
</div>
<div id="img-6">
<img src="image/6.jpg" alt="Geslaagde 5" width="337px" height="400px" />
</div>
</p>
</body>
</html>
CSS:
div#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: white;
}
div#header-pic{
position: fixed;
height: 50px;
left: 500px;
}
div#nav-bar{
position: fixed;
padding-top: 130px;
left: 0;
width: 100%;
white-space: nowrap;
}
div#nav-bar ul{
list-style: none;
text-align: center;
background-color: #323232;
padding: 10px 0;
}
div#nav-bar li{
display: inline;
}
div#nav-bar li a{
text-decoration: none;
color: white;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#icon-main{
position: fixed;
color: #323232;
padding: 10px;
}
div#icon-main i{
padding: 5px;
}
div#icon-main a{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#img-1 {
position: fixed;
left: 0;
padding-top: 184px;
width: 100%;
}
div#img-2 {
position: fixed;
padding-top: 184px;
padding-left: 255px;
}
div#img-3 {
position: fixed;
padding-top: 184px;
padding-left: 915px;
}
div#img-4 {
position: fixed;
padding-top: 184px;
padding-left: 585px;
}
div#img-5{
position: fixed;
padding-top: 184px;
padding-left: 1245px;
}
div#img-6 {
position: fixed;
padding-top: 184px;
padding-left: 1575px;
}
i know the code is bad but i hope someone can help me!
Here is a fiddle.
-Ryan
I looked at your external code. Please add your HTML and CSS to your question in Stack Overflow.
From the external HTML you have the following code:
<a>046-4524501</a>
Which does not work as a link.
You have this code
Home
That works as you would expect it to.
Change this line:
<a>046-4524501</a>
to
046-4524501
Where the href="Where you want the link to go".
It's all about the value for "href"
I did notice you are doing non-responsive html which means it is not mobile friendly or will look the same in smaller browser windows.
Your code is messy but your doing okay.
First off wrap everything you are putting in the header in the header div
The images are floating up to the top over your nav due to the position:fixed
Remove all the empty <p></p> between your div's
Use floats on your images and width of a percentage of 100% plus wrap them in a container/div
If you need me to I can see if I can redo all your html and CSS but think for you would learn better to try it out for yourself.
You could always go look at the HTML5 boilerplate out there and use them to guide you on how to construct good code.
I see that you are trying to create a row of images. Instead of using a system of DIVs why don't you use the more flexible (and more responsive) structure of a list?
Then you can use float: for lining them up in a row and basic CSS to give them sizes. The images will be specified as a background for these li elements (better practice).
Like this: http://codepen.io/Attrexx/pen/KVvwXP
You are placing divs containing the images using padding. That's why you can not use links in the menu. Div blocks cover your links.
Try using something like:
selector {
position: absolute; /* or `fixed` like in your css; see below*/
top: 100px; /* pixels from the top */
left: 100px; /* pixels from the left */
/* you can also use `bottom` and `right` */
}
For example:
div#img-3 { /* or just `#img-3`; see below */
position: absolute;
top: 184px;
left: 915px;
}
Check this w3 schools article for more information on positioning.
Not related to the question:
If you are using CSS's id selector (#), I suggest not to use element selector (e.g. div). So rather than div#img-3 try using just #img-3.
Try avoiding using id selectors at all. You can use class rules, and happily after some time they will result in saving you a lot of work.
If you are using HTML5 then try using semantic elements.
Avoid using fixed position when you don't need to (your page is an example of such page).
Paragraphs (p) shouldn't be used in the same way as div. It may result in bad habit for semantic sites.
Rather than using positioning (position), experiment with float or different display types (e.g. inline-block). Use it only when it is really needed.
Read about HTML Responsive Web.
I'm running into a weird glitch which only seems to happen in chrome and safari. It's hard to explain why this happens with sample code, but I'll try to illustrate what I'm doing with code, while providing a link to the actual page below.
First of all, I have an unordered list displayed inline-block, so it can be justified just like text. Each list item contains an svg in an image tag and a paragraph with a short description, both wrapped in a single anchor tag. Nothing special i guess, but here's the catch: in chrome and safari the browser renders a 1px by approximately 15px blue/blackish line between the paragraph and the image, and I have no idea why this is happening. Here's the code:
<div class="wrapper">
<div class="justified-list home-icons">
<ul>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
</ul>
<span class="stretcher"></span>
</div><!-- .justified-list -->
</div><!-- .wrapper -->
and here is the css (I'm using scss):
.wrapper {
width: 100%;
}
.justified-list {
width: 100%;
text-align: justify;
* {
display: inline;
}
li {
display: inline-block;
vertical-align: top;
}
.stretcher {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
}
Also, a codepen is provided here:
http://codepen.io/smelly586/pen/NPVVYd
If anyone has a clue on what's going on, or even better: has a possible fix for this, you have my gratitude.
Set your font-size on the element to 0. What you're seeing is the underline in the anchor element for whitespace in your HTML.
You could turn off the text-decoration: underline; that the browser renders by default for anchors, but let's assume that's not what you want to do.
Instead, the element with text will need to be reset to document root font-size (or whatever you want) using something like p { font-size: 1rem; }.
Example Codepen
So, accordingly, the SCSS/LESS would be:
.justified-list {
width: 100%;
text-align: justify;
* {
display: inline;
}
li {
display: inline-block;
vertical-align: top;
a {
font-size: 0;
p { font-size: 1rem; }
}
}
.stretcher {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
}
An image is worth a thousand words, so here is one:
The upper image is the corect version, I used display:table-cell to avoid what happens in the second image in IE7. What do you suggest to use instead to avoid this case?
Here is the code used:
<div class="sharerDataContainer">
<img src="http://tctechcrunch2011.files.wordpress.com/2011/09/perfectworld.png?w=145" width="90" alt="Andrew" />
<div class="sharerData">
<p class="sharerDataTitle">
<a href="http://example.org" target="_blank">
Website Title Here
</a>
</p>
<p class="sharerDataAddress">
mbac.squarespace.com
</p>
<p class="sharerDataDescription">
Congratulations to Rachel Edwards, who won a fabulous Bloom Tea Treatment Box Set (worth £20) from our friends at Running Cupcake
</p>
</div>
</div>
UPDATE:
CSS code:
.sharerDataContainer img {
float: left;
}
.sharerData {
background: none repeat scroll 0 0 transparent;
border: 0 solid #0077A5;
color: #808080;
display: table-cell;
font-size: 11px;
line-height: 15px;
padding: 0 10px !important;
position: relative;
}
.sharerData .sharerDataDescription {
margin-top: 5px;
}
IE7 does not support display: table-cell.
Though it's not really a problem in this instance, because there's no need for it. You can replace it with overflow: hidden to achieve the same effect: http://jsfiddle.net/thirtydot/AmNeV/
the simple cross-browser solution is to wrap the image in another division tag:
<div class="imgContainer">
<img src="" width="90" alt="Andrew" />
</div>
and let it float:
.sharerDataContainer .imgContainer {
float: left;
}
try it! http://jsfiddle.net/9U7e9/
I am going nuts with a whitespace problem inside a div. Two of my divs have unexplained whitespace but a third similar one has none. When I use the compatability mode of IE8 the whitespace disappears so I am guessing it is something to do with the CSS but for the life of me I can't seem to see what.
The page causing the issue is at http://www.infinitedreamers.co.uk/blog/
I have made one of the divs background white to show what I mean.
The snippet of the page is as follows:
<div id="id_front_main">
<div id="id_front_top">
<div id="id_front_top_title">
<h2>Latest Gallery Images</h2>
</div><!--#id_front_top_title-->
<table id="id_gallery_latest"><tr><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_Fae4.jpg" height="100" width="86" alt="Contemplation"/><p class="id_title">Contemplation</p></td><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_Fae6.jpg" height="100" width="100" alt="Emo Fae"/><p class="id_title">Emo Fae</p></td><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_IOTPM.jpg" height="100" width="88" alt="Invasion of the Saucer-Plushies"/><p class="id_title">Invasion of the Saucer-Plushies</p></td><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_StarPlushies.jpg" height="100" width="84" alt="Star Plushies"/><p class="id_title">Star Plushies</p></td></tr></table>
<div id="id_front_top_meta">
</div>
</div><!--#id_front_top-->
<div id="id_front_main_holder">
<div id="id_front_left">
<div id="id_front_left_title">
<h2>3d Art Latest</h2>
</div><!--#id_front_left_title-->
<div class="id_latest_posts">
<h3>Getting Started in 3d Art for free</h3>
<span>
<p>You want to create 3d art on the PC or Mac? This is a quick guide on how to achieve this for free.</p>
</span>
</div><!--id_latest_posts-->
<div id="id_front_left_meta">
</div>
</div><!--#id_front_left-->
<div id="id_front_right">
<div id="id_front_right_title">
<h2>Software Latest</h2>
</div><!--#id_front_right_title-->
<div class="id_latest_posts">
<h3>Poser Files Database</h3>
<p>Poser Files Database is designed to aid in the cataloging of content for Poser, DazStudio, Vue, and other similar 3D tools. It can be used simply as a way to find a particular file or to provide detailed information about all products in one location.</p>
<h3>File Renamer</h3>
<p>FileRenamer is a simple batch file renaming utility.</p>
<h3>Database Documenter</h3>
<p>Database Documenter generates easy-to-read and detailed documentation for SQL Server 2000/2005 databases with a few simple clicks.</p>
</div><!--id_latest_posts-->
<div id="id_front_right_meta">
</div>
</div><!--#id_front_right-->
</div><!--#id_front_main_holder-->
</div><!--#id_front_main-->
<div class="clear"></div>
The CSS that applies is as follows:
#id_front_main
{
text-align: center;
width: 100%;
}
#id_front_top
{
width: 100%;
background: url(images/fcover.jpg);
background-repeat: repeat-y;
}
#id_front_top_title
{
width: 100%;
background: url(images/ftop.jpg);
background-repeat: no-repeat;
height: 70px;
}
#id_front_top_meta
{
background: url(images/fmeta.jpg);
height: 31px;
padding-top: 4px;
}
#id_front_main_holder
{
width: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#id_front_left
{
width: 45%;
float: left;
/*background: url(images/flcover.jpg);
background-repeat: repeat-y;*/
background: white;
margin-bottom: 5px;
margin-top: 10px;
padding: 0 0 0 0;
}
#id_front_right
{
width: 45%;
float: right;
background: url(images/flcover.jpg);
background-repeat: repeat-y;
margin-bottom: 5px;
margin-top: 10px;
padding: 0 0 0 0;
}
#id_front_left_title, #id_front_right_title
{
width: 100%;
background: url(images/fltop.jpg);
background-repeat: no-repeat;
height: 70px;
}
#id_front_left_meta, #id_front_right_meta
{
background: url(images/flmeta.jpg);
height: 31px;
padding-top: 4px;
}
#id_front_main h2, #id_front_left h2, #id_front_right h2
{
background: transparent;
font: 24px Georgia,century gothic, Arial, sans-serif;
font-weight:normal;
padding-top: 10px;
padding-bottom: 5px;
}
#id_front_left p, #id_front_right p
{
padding: 0 10px 0 10px;
text-align: left;
}
James :-)
The whitespace is caused by the top-margin of the h2 in the boxes. To solve it:
#id_front_main h2, #id_front_left h2, #id_front_right h2 {
...
margin-top: 0;
}
It is always a good idea to reset the styles you are using to avoid these kind of problems when looking at your site in different browsers. There are standard reset style-sheets that can help you with that like:
http://meyerweb.com/eric/tools/css/reset/
Even we faced the similar type of issue.
If you are showing one div at a time, then you can use the below solution:
document.getElementById('myDiv').style.display = 'none';
to the div which is larger in size than the current div shown.
This really works well with IE10 webkit, Chrome Webkit and Safari Webkit.
Cheers,
Ankit