CSS cross browser image aligning issue - html

I am working on Ken university website, and i am getting issue of cross browser.
In IE 8 it is not showing properly.
But in firefox and chrome it works fine.
it is the image with the textbox which i am trying to fix..
Here is the Demo Page.
http://safijustonline.com/Forms/Student/StudentRegistration.aspx
please check it in both IE and firefox..
How to solve this cross-browser image alignment issue?
login details:
username = alinisar#ken.com
pass =123
update:
I have also added reset.css file in my theme.
generated HTML of my code:
<div id="CPH_Content_TabContainerStudentRegistration_TabPanelMain_Cmb_Shift" class="WindowsStyle" style="display:inline-block;">
<table id="CPH_Content_TabContainerStudentRegistration_TabPanelMain_Cmb_Shift_Cmb_Shift_Table" class="ajax__combobox_inputcontainer" cellspacing="0" cellpadding="0" style="border-width:0px;border-style:None;border-collapse:collapse;display:inline-block;position:relative;top:5px;">
<tbody>
<tr>
<td class="ajax__combobox_textboxcontainer">
<td class="ajax__combobox_buttoncontainer">
<button id="CPH_Content_TabContainerStudentRegistration_TabPanelMain_Cmb_Shift_Cmb_Shift_Button" type="button" style="height: 25px; width: 25px; margin: 0px; padding: 0px; visibility: visible;"></button>
</td>
</tr>
</tbody>
</table>
<ul id="CPH_Content_TabContainerStudentRegistration_TabPanelMain_Cmb_Shift_Cmb_Shift_OptionList" class="ajax__combobox_itemlist" style="display: none; visibility: hidden; z-index: 10000; overflow: hidden; width: 215px; position: absolute; height: 30px;">
<li>Morning</li>
<li>Evening</li>
</ul>
<input id="CPH_Content_TabContainerStudentRegistration_TabPanelMain_Cmb_Shift_Cmb_Shift_HiddenField" type="hidden" value="0" name="ctl00$CPH_Content$TabContainerStudentRegistration$TabPanelMain$Cmb_Shift$Cmb_Shift_HiddenField">
</div>
the css of my button and image:
.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button {
background-image: url("Images/windows-arrow.gif");
background-position: left top;
border: 0 none;
height: 22px;
margin: -10px 0 0;
padding: 0;
width: 22px;
}
Image on top of button.

Add this and try
.ajax__combobox_textboxcontainer{
vertical-align:top;
}
I tested in IE8. It works
DEMO

Your solution is simple: Just add display: block to those elements style.
It have solve the problem on IE 10.
Element which is not displayed block don't use: padding and margin.
And my advice, try to use classes insted of inline style codding.

did you try position:relative; or position:absolute;

Try adding the below meta tags in the Head section
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
Remember the meta tag that is on top will be given first preference

Related

Issue with displaying text on an image

I am buliding a custom email template and i am trying to put text in a specific position on an image. This template is built dynamically via mustache on a camunda workflow model.
The codes below can be tested/viewed at w3schools
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
text-align: left;
color: white;
}
.top-left {
position: absolute;
top: 170px;
left: 250px;
}
</style>
</head>
<body>
<div class="container">
<img data-imagetype="External" src='img_snow_wide.jpg' width="1000" height="600">
<div class="top-left">{{happyBirthday}}</div>
</div>
</body>
</html>
As you may see {{happyBirthday}}, which will display values dynamically, is showing on the desired place on the image when using CODE A.
However the template received via email shows the value for {{happyBirthday}} below the image. I was able to get the snippet of code, CODE B, from the elements tab on chrome console via inspect,
CODE B
<div>
<style>
<!-- .rps_9d84 .x_container {
text-align: left;
color: white
}
.rps_9d84 .x_top-left {
top: 170px;
left: 250px;
color: #000080
}
-->
</style>
<div class="rps_9d84">
<div>
<div class="x_container">
<img data-imagetype="External" src="img_snow_wide.jpg" width="1000" height="600">
<div class="x_top-left">{{happyBirthday}}</div>
</div>
</div>
</div>
</div>
As you may see the two codes are similar in the key aspects of the css code i.e. top-left, which determines the position of the dynamic text on the image.
I am not an html expert and i do not see the difference between the two sets of code. Could someone point out what i am missing here ?
You are missing the position: absolute; property on .x_top-left
Since your top-left class element doesn't seem to apply the absolute position style (in CODE B), which will by default always be placed under or next to the previous element.
Try to set the position element with the !important flag.
.top-left {
position: absolute !important;
top: 170px;
left: 250px;
}

Unable to show entire web-page with only just background image

What has been done:
Have created the required Html tags as shown in the code below:
<html>
<head>
....
....
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../jquery-1.3.2.min.js"></script>
<style style="text/css">
html, body {
padding: 0;
margin: 0;
position:relative;
width: auto;
height: auto;
}
.container {
width: 150px;
align-content: center;
margin-top: 980px;
clear: both;
}
.container input {
width: 82%;
clear: both;
}
</style>
</head>
<body>
...
...
<div id="page4" align= "center" style=" background-image: url(Image/Page2.png); position: relative; z-index: 2; display:none" width="100%" height="100%" left="0px" top="0px">
<form style=" alignment-adjust: autofocus; padding: 30px" class="container" action="Page5" method="POST">
Name: <input type="text" name="name" size="15px" required><br><br>
Email: <input type="text" name="email" size="15px" required><br><br>
</form>
<input type="image" src="image/Submit.png" alt="Submit" width="100px" height="50px" onClick = "Page5()">
</div>
<script>
function Page5() {
$("#page4").hide();
$("#page5").show();
}
</script>
<div id="page5" align= "center" style=" background-image: url(Image/Page5.png);position: relative; z-index: 3; display:none" width="100%" height="100%" >
</div>
</body>
</html>
Functionality:
User is supposed to be able to view page 5 and the background image "Page 5" is being displayed, after the user has submitted the form in page 4. Hence, when user navigate from page 4 to page 5, user is suppose to the see the content of page 5 which is just the background image.
Issue
When user navigates from page 4 to 5, page 5's content is not displayed, the entire background image is not displaying. Hence, I would like to ask for help,
1.) why is this happening
2.) what is the best rectification process
NOTE
I have to input the following attribute:
display:none
Reason: I have created the following stack in the form of block, hence the individual <div> block will only appear when the <script> is implemented. Hence, please do not suggest that I need to remove the display:none as doing so will
cause the to merge and furthermore, it does nothing as well.
Thanks
first of all there is no "width" and "height" attribute to div's so move the width and height declarations to CSS. Also add height 100% to html and body otherwise the div has no basis to calculate the height upon
html, body {
padding: 0;
margin: 0;
position:relative;
width: 100%;
height: 100%;
}
#page5{
background-color: red;
width: 100%;
height:100%
}
http://jsfiddle.net/arrhyppz/
P.S. use the inspect function of your browser to see the applied css, you will find where your mistakes are

CSS Margin Top not working properly on IE 8

I went through couple of links for this issue, but none of the fix worked for me.
I used Padding, but still getting same result.
I used position: relative, still same result and so on..
I have a CSS which looks like below:
.ItemsStyle
{
margin-top: 5px;
margin-bottom: 5px;
width: 720px;
}
and my div looks like below:
<div id="Items" class="ItemsStyle">
<!--Work Here... -->
</div>
and I have a textbox above this div which looks like:
<input id="textBoxName" type="text" style="width: 415px; font-family: Verdana"/>
Now, I want 5px margin between my textbox and my div. CSS is working perfectly fine on IE 11 and the margin is just fine.
But, when I run my application on IE 8, the margin is more, something like 30px down the textbox when I need 5px.
I have tried and tested all the methods that have been suggested in other similar posts, but I am getting same result.
I've tried to replicate this on a virtual machine using the following code and was unable to:
<style type="text/css">
.ItemsStyle{
margin-top: 5px;
margin-bottom: 5px;
width: 720px;
background:#f00;
height:200px;
}
</style>
<input id="textBoxName" type="text" style="width: 415px; font-family: Verdana"/>
<div id="Items" class="ItemsStyle">
<!--Work Here... -->
</div>
Nevertheless, you could just use margin-bottom on the input rather than margin-top on the div. You should get the results you're looking for:
<style type="text/css">
.ItemsStyle{
margin-bottom: 5px;
width: 720px;
}
</style>
<input id="textBoxName" type="text" style="width: 415px; font-family: Verdana; margin-bottom:5px;"/>
<div id="Items" class="ItemsStyle">
<!--Work Here... -->
</div>
As a general "flow" to a document I try to push everything down (ie margin-bottom, padding-bottom) the page rather than up (ie margin-top, padding-top)
Internet explorer 8 is a huge headache for any developer. Try this code:
.ItemsStyle
{
margin: 5px auto;
width: 720px;
}

How to decorate an <hr/> tag

I want to have an horizontal ruler with the following characteristics:
align:left
noshade
size:2
width:50%
color:#000000
If the above attributes were not deprecated, I would use:
<hr size="2" width="50%" noshade style="color:#000000" align="left" />
I'm now thinking of using the style attribute only. Are there any tricks to make the HR render the same in several browsers?
EDIT:
From the answers, I remade my <hr /> tag to:
<hr style='background-color:#000000;border-width:0;color:#000000;height:2px;line-height:0;text-align:left;width:50%;'/>
However, in Firefox, the text-align:left property seems to have no effect, as the horizontal rule appears centred. It works fine in Opera and IE, though. I experimented my code here:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_test
Any trick to make it left-aligned?
In 2015, most browsers seem to render HR as a block element with zero height and 1px inset border. You can change the properties like this:
p { font: italic large serif; text-align: center; }
<p>hr size="2" color="palevioletred" width="50%" align="left"</p>
<hr style="border: 1px solid palevioletred;
margin-right: 50%; ">
<p>hr size="2" color="palevioletred" width="50%" align="right"</p>
<hr style="border: 1px solid palevioletred;
margin-left: 50%;">
<p>hr size="1" color="palevioletred" width="50%" align="center"</p>
<hr style="border-width: 1px 1px 0;
border-style: solid;
border-color: palevioletred;
width: 50%;
margin-left: auto;
margin-right: auto;">
To answer your question:
"Any trick to make it left-aligned?"
I would just add 'display: inline-block;' to the style attribute in your previous code.
Your completed code would look like this:
<hr style = 'background-color:#000000; border-width:0; color:#000000; height:2px; lineheight:0; display: inline-block; text-align: left; width:50%;' />
I tested this in Chrome, IE, and Firefox, and it worked in each. Further documentation and browser compatibility can be found here: CSS2 - The Display Declaration
On a side note, it would be best to add this style to an external or internal style sheet instead of adding it inline. This way, you can have a standardized hr element for your entire website, and it keeps your style declarations separate from your document layout.
Why not make a picture, then type this code into CSS???
hr {
height:43px; /*(image height)*/
width:50%;
background-image:url("hr-tag-image.png"); /*Your image file*/
/*Demo: https://heckles.typrograms.com */
}

Why is this CSS nowrap not working?

I'm trying to keep the bar_top_container div from wrapping it's contents no matter how wide the page is (i.e. both selects should appear always on the same line), this is not working however when the page width is to small for them to both fit on one line, how can i fix this?
Styles:
#bar_top_container { position: relative; white-space: nowrap; }
#bar_top_block { float: left; padding-left: 10px; padding-right: 10px; border-right: 1px solid #4965BB; }
#clear { clear: both; }
HTML:
<div id="bar_top_container">
<div id="bar_top_block">
<span class="bold">select1: </span>
<select><option value="asdf">asdf</option></select>
</div>
<div id="bar_top_block">
<span class="bold">asdf: </span>
<select><option value="blah">-- select action --</option></select>
</div>
<div id="clear"></div>
</div>
You can have both block and inline properties for an element if you display it as ... inline-block!
Here is your code corrected and working:
span.bold are labels
a label is associated to its form element via the for/id attributes
bar_top_block is an id used twice. Should be a class
no need for float: left; as display: inline-block; is used
thus no need for a clearing element either
the .bar_top_block elements are also displayed inline so any whitespace between them is displayed as whitespace. To avoid this, I added a comment that avoid any whitespace though still letting the HTML code readable. The text within is 'no whitespace' so the developer will know that this comment is there for a reason and shouldn't be stripped :)
you can remove the width on body, it's just here for the example
you can play with the overflow property on the container
as IE7 and below don't understand the inline-block value on block elements like div, you must use display: inline and give the element the hasLayout with, for example, zoom: 1;
the best way to target IE7 and below and only those browsers is with a conditional comment
I added support for Fx2 but this is merely for historical reasons :)
.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Stack Overflow 3150509 - Felipe</title>
<style type="text/css">
body {
width: 300px;
}
#bar_top_container {
overflow: auto;
white-space: nowrap;
border: 1px solid red;
}
.bar_top_block {
display: -moz-inline-stack; /* Fx2, if you've to support this ooold browser. You should verify that you can still click in the elements, there is a known bug with Fx2 */
display: inline-block;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #4965BB;
}
</style>
<!--[if lte IE 7]><style type="text/css">
.bar_top_block {
display: inline;
zoom: 1;
}
</style> <![endif]-->
</head>
<body>
<form method="post" action="#" id="bar_top_container">
<div class="bar_top_block">
<label for="select1">Obviously I am a label: </label>
<select id="select1"><option value="asdf">asdf</option></select>
</div><!-- no whitespace
--><div class="bar_top_block">
<label for="select2">I'm a label too and I need a for attribute: </label>
<select id="select2"><option value="blah">-- select action --</option></select>
</div>
</form>
</body>
</html>
Floating elements wrap as white-space: nowrap does not work for block elements but only for inline elements and text.
I'm suggesting to use a valid form usage:
<form>
<label>select1: <select><option value="asdf">asdf</option></select></label>
<label>asdf: <select><option value="blah">-- select action --</option></select></label>
</form>
Hope it helps.