I'm working on a slideshow, and I'm getting a problem with the images being resized when the page refreshes. I've stripped my code down to the bare, gotten rid of all the javascript and as much of the html/css as I could while still getting the problem, and I simply cannot figure it out. The problem only arises on Safari. It doesn't happen every time I refresh, which makes it even more confusing.
I've posted a screenshot of how it should look, and then how it looks after I refresh the page. If you see anything in my code that could be causing this, please let me know.
HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Website </title>
<link href="slideshowRebuild.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="topDiv">
<iframe id="slideshowImg0" src="http://www.youtube.com/embed/xKBqSeYgQwo" frameborder="0" ></iframe>
</div> <!-- topDiv -->
<div id="imageDiv">
<table id="mediaMenu">
<tr>
<td class="subMenu"><img style="opacity:1.0" id="sub0" src="images/tebow.jpg" alt="Tim Tebow"></img>
</td>
<td class="subMenu"><img id="sub1" src="images/nash.jpg" alt="Steve Nash"></img>
</td>
<td class="subMenu"><img id="sub2" src="images/kobe.jpg" alt="Kobe Bryant"></img>
</td>
<td class="subMenu"><img id="sub3" src="images/giants.jpg" alt="San Francisco Giants"></img>
</td>
<td class="subMenu"><img id="sub4" src="images/tbrown.jpg" alt="Terrell Brown"></img>
</td>
</tr>
</table>
</div> <!-- imageDiv -->
</body>
</html>
CSS CODE
body{
background-color:#CCC;
}
#imageDiv {
border: 5px solid black;
width:93%;
position:relative;
background-color:#E0EAFF;
margin:3%;
}
#mediaMenu, #mediaMenu table {
margin:0;
padding:0;
border-spacing:0;
position:relative;
}
#mediaMenu td {
padding:0px;
margin:0px;
width:20%;
}
#mediaMenu img {
width:100%;
height:90px;
}
#contentText {
color:orange;
float:right;
width:39%;
}
Related
I'm trying to make a page navigation as portable as possible. I'm using Chrome 58 and the page is displayed as expected: the iframe is resized according to the td container, but is not working in IE and firefox which displays the iframe in the middle of the cell. Here is my code.
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="language" content="ES">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css.css" type="text/css" rel="stylesheet">
<script src="js.js" type="text/javascript" charset="UTF-8"></script>
<title>Mi sitio</title>
</head>
<body>
<table id="navUI">
<tr>
<td id="navHeader" colspan="2">Tema general</td>
</tr>
<tr>
<td id="MenuHeader">Menú</td>
<td rowspan="4"><iframe src="intro.htm" id="navField"></iframe></td>
</tr>
<tr>
<td class="MenuItems" onclick="navPage('page1'); return false;">Item 1</td>
</tr>
<tr>
<td class="MenuItems" onclick="navPage('page2'); return false;">Item 2</td>
</tr>
<tr>
<td class="spander"> </td>
</tr>
</table>
</body>
</html>
CSS:
#charset "utf-8";
html, body, table {
padding:0;
margin:0;
height:100%;
width:100%;
}
body {
font:12px Verdana, Arial, Sans-serif;
}
table#navUI, td {
border:1px solid black;
}
td#navHeader {
text-align:center;
height:30px;
}
td#MenuHeader {
width:10%;
text-align:center;
}
td.MenuItems {
width:10%;
}
td.MenuItems:hover {
background-color:#BDBEE1;
cursor:pointer;
}
td.spander {
width:10%;
height:100%;
}
#navField {
border:none;
height:100%;
width:100%;
}
The idea is to keep pure html and css without jquery. Thanks for the help.
Add this to the td which contains the iframe:
vertical-align:top;height:100%;
Here's a fiddle which works in Firefox:
https://jsfiddle.net/3urm8kx8/1/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
hi i want to make a menu on the side using iframe
below are my code, can anyone guide me, the display looks very weird.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Page</title>
<style type="text/css">
html
{
overflow: auto;
}
html, body, div, iframe
{
margin: 0px;
padding: 0px;
height: 100%;
border: none;
}
iframe
{
display: block;
width: 100%;
border: none;
overflow-y: auto;
overflow-x: hidden;
}
</style>
</head>
<table>
<tr>
<td>
This is the Menu
</h2>
<br>
<!--
#######################
the links to the iframe use the iframe name as the TARGET
####################### -->
<a href="http://archive.ncsa.illinois.edu/primer.html" target="iframe1">
Page 1
</a>
<br>
<a href="http://www.w3schools.com/cssref/pr_text_color.asp" target="iframe1">
Page 2
</a>
<br>
<a href="http://www.w3schools.com/colors/colors_picker.asp" target="iframe1">
Page 3
</a>
<br>
</td>
<td width="150" valign="left">
<p align="right">
<body>
<iframe id="tree" name="iframe1" src="http://www.agoogleaday.com/#date=2012-03-27" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="no" allowTransparency="true"</iframe>
</tr>
</table>
</body>
</html>
the output of this code look like this
the menu looks ok, but the content are very small, how do i make it fill all the window?
I am not sure what are you looking for but you can increase width and height of iframe
html
{
overflow: auto;
}
html, body, div, iframe
{
margin: 0px;
padding: 0px;
height: 100%;
border: none;
}
iframe
{
display: block;
width: 100%;
border: none;
overflow-y: auto;
overflow-x: hidden;
height:800px;
}
table{
width:100%;
table-layout:fixe;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Page</title>
</head>
<table>
<tr>
<td style="width:20%;">
This is the Menu
<br>
<!--
#######################
the links to the iframe use the iframe name as the TARGET
####################### -->
<a href="http://archive.ncsa.illinois.edu/primer.html" target="iframe1">
Page 1
</a>
<br>
<a href="http://www.w3schools.com/cssref/pr_text_color.asp" target="iframe1">
Page 2
</a>
<br>
<a href="http://www.w3schools.com/colors/colors_picker.asp" target="iframe1">
Page 3
</a>
<br>
</td>
<td style="width:80%;">
<iframe id="tree" name="iframe1" src="http://www.agoogleaday.com/#date=2012-03-27" scrolling="no" allowTransparency="true"</iframe>
</tr>
</table>
</body>
</html>
I have read several similar questions, all involving use of width and height attributes either inline or in a class. However no matter how I seem to try it, it is not working.
Due to wanting to apply transformations to the button and text independently, I have had to use a class on the div and a sub class for the button. Stripping the code down, the width and height of the button are not filling the surrounding div.
I am working in Visual Studio 2008 and debugging against IE8 if that makes any difference.
HTML:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td >
<h1> TITLE</h1>
</td>
<td style="width:150px;height:40px;">
<div class="button-wrapper">
<button ID="RetrieveButton2" title="tooltip" runat="server" serverclick="RetrieveButton_Click">Search</button>
</div>
</td>
<td></td>
</tr>
</table>
</div>
</form>
</body>
</html>
CSS:
body
{
}
.button-wrapper
{
width: 150px;
height: 40px;
}
.button-wrapper button
{
width: 100%;
height: 100%;
}
It appears to be environmental. It was not happening on deployment, but it is all academic because requirements have changed so no longer using this code.
I am implementing UI design in one of my own projects, and it looks like I have an issue with CSS, big time.
As far as I know, I have specified styles for Input types : text, buttons in the way CSS accepts:
body input[type=text]{
border:1px solid #208278;
height:24px;
padding-left: 5px;
}
body button{
background-color: #279A8F;
border:0px;
color:white;
height:24px;
}
body input[type=password]{
border:1px solid #208278;
height:24px;
padding-left: 5px;
}
body input[type=submit], input[type=button]{
background-color: #279A8F;
border:0px;
color:white;
height:24px;
}
On the login page, the fields appear to be of 24px in height, where as after I log in, I see all the fields are bigger, with height more than 24px. I have no clue.
One point is after logging in, the fields are present in a container which has some padding, and margins, but I don't see any reason how this would affect the fields. This issue has been driving me crazy nuts, can someone please provide some insight?
The container in which the form fields are placed are below:
#container{
width:1100px;
margin: 0 auto;
}
#leftbar{
float:left;
width:200px;
font-size:13px;
background-color:#237971;
color:white;
padding:4px;
}
#rightbar{
float:right;
width:200px;
font-size: 13px;
background-color:#237971;
color:white;
padding:4px;
}
#middlebar{
padding:5px;
margin-left:3px;
margin-right:3px;
float:left;
width:660px;
border:1px solid black;
}
HTML Code of Log in page:
<html>
<head>
<link rel=stylesheet type=text/css href="<?php echo base_url('layout/layout.css');?>" media="all">
<title>
My Page
</title>
</head>
<body>
<div id=header>
Welcome
</div>
<?php echo validation_errors(); ?>
<?php echo form_open('login/verify'); ?>
<table>
<tr>
<td align="right"><label for="email">E-Mail:</label></td>
<td align="left"><input type="text" name="email" id="email" value="<?=set_value('email')?>"></td>
</tr>
<tr>
<td align="right"><label for="password">Password:</label></td>
<td align="left"><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td></td>
<td align="left"><input type="submit" name="submit" value="Login"></td>
</tr>
</table>
</form>
<br/>
Sign up for a new account<br/>
</body>
</html>
HTML Code of member's area:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="<?php echo base_url('js/jquery-1.9.1.js'); ?>"></script>
<script src="<?php echo base_url('js/jquery-ui/js/jquery-ui-1.10.2.custom.js'); ?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('js/jquery-ui/css/customjqueryui/jquery-ui-1.10.2.custom.css');?>">
</script>
<link rel=stylesheet type=text/css href="<?php echo base_url('layout/layout.css');?>">
<title>Welcome</title>
</head>
<body>
<div id=container>
<div id=header>
Members area
</div>
<div id="leftbar">
<div class=content>Logout</div></div>
<div id="rightcontainer">
<div id="middlebar">
<?php echo validation_errors();?>
<?php echo form_open_multipart('home/create/validate'); ?>
<table>
<tr>
<td align="right"><label for="fullname">full Name:</label></td>
<td align="left"><input type="text" name="fullname"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="finish" value="Finish"></td>
</tr>
</table>
</div>
<div id="rightbar"></div>
</div>
</div>
</body>
</html>
All the fields in the member's area appear bigger than 24px. :( Please help me!
Thank you very much in advance.
Figured out the main fault,
I was not standardizing the login page with the statements below in my HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
I've two elements in <td> a <div> and some text. I would like to align <div> to top and text to middle of <td> How can I do that?
Edit: The should be vertically top aligned and not text inside div.
try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<style type="text/css">
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 }
body { font:normal 62.5% tahoma }
.my-table { height:300px }
.my-cell { position:relative; border:1px solid green }
.my-div { position:absolute; top:0; left:0; border:1px solid red }
</style>
</head>
<body>
<table class="my-table">
<tr>
<td class="my-cell" align="center">
<div class="my-div">
I'm aligned to the top
</div>
This text is vertically centered.
</td>
</tr>
</table>
</body>
</html>
Like this?
<html>
<body>
<table width="100%" height="100%" border="1">
<tr>
<td><div style="text-align: center;">some text</div></td>
</tr>
</table>
</body>
</html>
...Or
<html>
<body>
<table width="100%" height="100%" border="1">
<tr>
<td align="center"><div style="text-align: left;">div text</div>some text</td>
</tr>
</table>
</body>
</html>
Remember to set the body height so you can see the vertical centering
by default any text in a table is vertical alligned, not sure why you need a div there. Its very difficult to get content to allign vertically inside a div