473,811 Members | 3,811 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

IE & Firefox differences with inline-block styled divs

Vic
I suspect that Firefox is doing it right (it usually is) but I worked
out a page thinking this *should* do what I want and lo and behold it
did work in IE6

http://www.fogcat.co.uk/example/test002.html

But when looking at Firefox it goes all odd. If you remove all the
internal "imagediv" div from the "imagechunk " div it nearly works but
doesn't algin the "link text" like IE.

Again my question is... how can I achieve an effect like I've got in
IE6 in a cross browser manner?
Jul 20 '05 #1
7 8913
re********@hotm ail.com (Vic) wrote:
I suspect that Firefox is doing it right (it usually is) but I worked
out a page thinking this *should* do what I want and lo and behold it
did work in IE6

http://www.fogcat.co.uk/example/test002.html
inline-block is a CSS 2.1 value not supported by Firefox or IE. So it
doesn't "work" in IE, it get's it wrong, you just like what it's doing.
Again my question is... how can I achieve an effect like I've got in
IE6 in a cross browser manner?


Again the question is "what are you actually trying to do?", supply
something using real content so that we can provide proper help.

--
Spartanicus
Jul 20 '05 #2
Vic
> Again the question is "what are you actually trying to do?", supply
something using real content so that we can provide proper help.


What I am trying to do is not dissimilar from the IE result.

I want a set of divs down the page (the "imagedivs" )
Each div will contain:
* An image - but that image will be nested inside a div - it's
returned
that way from a php function. Images may be of varying height so
I can't
use pixel values at top margins or anything like that.
* A link to another page

- The link should be positioned to the right of the image and
aligned
vertically with the centre of the image.

This is one of those things that's a doddle with tables, but I'm
trying to train myself to think CSS.

+--------------------------------------+
| +----------------+ |
| | .............. | | --- <div>
| | : : | | ... <img>
| | : : | Link here |
| | : : | |
| | .............. | |
| +----------------+ |
+--------------------------------------+

+--------------------------------------+
| +----------------+ |
| | .............. | |
| | : : | |
| | : : | Link here |
| | : : | |
| | .............. | |
| +----------------+ |
+--------------------------------------+
Jul 20 '05 #3
re********@hotm ail.com (Vic) wrote:
Again the question is "what are you actually trying to do?", supply
something using real content so that we can provide proper help.
What I am trying to do is not dissimilar from the IE result.


Sigh, you are again referring to the layout you want without showing
actual content that would allow us to judge the fundamentals.
- The link should be positioned to the right of the image and
aligned
vertically with the centre of the image.


img{vertical-align:middle}

<img ...><a href="foobar">f oobar</a>

--
Spartanicus
Jul 20 '05 #4
Vic
Spartanicus <me@privacy.net > wrote in message news:<nk******* *************** **********@news .spartanicus.ut vinternet.ie>.. .
....
Sigh, you are again referring to the layout you want without showing
actual content that would allow us to judge the fundamentals.

....

<div class='sectionl ink'>
<div class='albumima ge'>
<div class='thumbnai lPicture'>
<a href='./display.php?alb um_id=411f94635 9cae'><img
src='./gallery/pictures/411f946359cae/thumbnails/nanci.jpg'
alt='Display the album' width="100" height="149" border='0'></a>
</div>
</div>
<div class='albumlin k'>
<a ' href='./display.php?alb um_id=411f94635 9cae'>First
Album</a><br />
</div>
</div>
<div class='sectionl ink'>
<div class='albumima ge'>
<div class='thumbnai lPicture'>
<a href='./display.php?alb um_id=411f93f1c 15f4'><img
src='./gallery/pictures/411f93f1c15f4/thumbnails/1s_20and_200s.j pg'
alt='Display the album' width="100" height="149" border='0'></a>
</div>
</div>
<div class='albumlin k'>
<a ' href='./display.php?alb um_id=411f93f1c 15f4'>Second
Album</a><br />
</div>
</div>
Jul 20 '05 #5
re********@hotm ail.com (Vic) wrote:
Sigh, you are again referring to the layout you want without showing
actual content that would allow us to judge the fundamentals.


[Div soup snipped]

What we have here is a failure to communicate.

Before you can think about styling the proper structure has to be
applied, structure trumps presentation, content should make sense sans
css, and in the context of this thread: the choice of styling depends on
it.

Content should therefore be marked up according to what it *is*, not how
you want it to look or sound like (with or without css).

The code you posted still fails to show us what type of content it is,
this makes suggesting a styling method a stab in the dark.

<stab in low light conditions>
Linked non square image thumbs of "albums" with a text link next to it:
an index of photo albums perhaps?
</stab in low light conditions>

Div's and span's are a semantically neutral "last resort" type of
markup, they should only be used if there's nothing better available.

Imo there's no single markup element that suites this type of content,
but I wouldn't resort to div's. I'd mark them up as list items if it's
just a thumbnail and a short text link (not a paragraph), in which case
the img{vertical-align:middle} styling I suggested earlier would work to
create the visual appearance you want.

If the thumb images differ in width and the index listing is to be
displayed vertically then a table could be the right type of markup (it
allows the text links to be lined up logically). In the case of table
markup you should use the cell align and valign attributes to create the
visual appearance you want.

--
Spartanicus
Jul 20 '05 #6

Spartanicus wrote:
*r*********@hot mail.com (Vic) wrote:

<stab in low light conditions>
Linked non square image thumbs of "albums" with a text link next to
it:
an index of photo albums perhaps?
</stab in low light conditions>

*


[condescending]Pretending to help people[/condescending]

--
chiazma
------------------------------------------------------------------------
Posted via http://www.forum4designers.com
------------------------------------------------------------------------
View this thread: http://www.forum4designers.com/message108445.html

Jul 20 '05 #7
On Tue, 24 Aug 2004 13:27:25 -0500, chiazma
<ch************ @mail.forum4des igners.com> wrote:
Spartanicus wrote:
*r*********@hot mail.com (Vic) wrote:
<stab in low light conditions>
Linked non square image thumbs of "albums" with a text link next to
it:
an index of photo albums perhaps?
</stab in low light conditions>
[condescending]Pretending to help people[/condescending]


<serious>Wantin g to help those who offer enough info to let us</serious>
------------------------------------------------------------------------
Posted via http://www.forum4designers.com
------------------------------------------------------------------------
View this thread: http://www.forum4designers.com/message108445.html


<condescending> Pretewnding to help people</condescending>
Jul 20 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
3348
by: eli.h... | last post by:
Hi, I'm trying to create a page with thumbnails that will fill all the available space. Like, let's say, MSWindows folder in thumbnails view. I want it to look like: O O O O O O O O O O O on wider screen,
87
9636
by: expertware | last post by:
Dear friends, My name is Pamela, I know little about CSS, but I would like to ask a question I have an image on a web page within a css layer: <DIV ID=MyLayer STYLE = "position: absolute;top:68px; left:563px; width:640px;height:480px;"> <IMG src="ReportImageBox_12.54.52.png" width=640 height=480></IMG>
14
2330
by: expertware | last post by:
Ok! to avoid confusion I will start a new argument. Thanks!! FIREFOX 1.0.7 AND IE6 viewed through DATATIME: a summary REPORT =============================================================== by Pamela Datatime Team -----------------
14
5943
by: Arne | last post by:
A lot of Firefox users I know, says they have problems with validation where the ampersand sign has to be written as &amp; to be valid. I don't have Firefox my self and don't wont to install it only because of this, so I hope some of you gurus can enlighten me with this :) In what circumstances can the "&amp;" in the source code be involuntary changed to "&" by a browser when or other software, when editing and uploading the file to the web...
0
2652
by: mahaq | last post by:
Hi Guys, I like to know if there is any better solution to this issue. I am a front end developer using CSS and asp.net technologies I have a .net page and I am using an external CSS file. After adding the following code What I see is that its fine on IE 6 & 7 but on firefox and netscape the 2 links given below shift to the center.
12
10124
by: InvalidLastName | last post by:
We have been used XslTransform. .NET 1.1, for transform XML document, Dataset with xsl to HTML. Some of these html contents contain javascript and links. For example: // javascript if (a &gt; b) ..... // xsl contents abc.aspx?p1=v1&amp;p2=<xsl:value-of select="$v2" />
11
2821
by: davecph | last post by:
I'm constructing a website with a layout created with div-tags. They have a fixed width, float left, and display inline. When one of the div's contain a select-element the right-most div floats down for no apparent reason, but when the select-elements are gone they all align as expected. No css apply to the select-elements. image of prob.: http://sdc.novasol.com/site/nov/TMP/withSelectBoxes.gif image of expected:...
3
1241
by: Mufasa | last post by:
Can anybody suggest websites that talk about what you need to do to make an IE site also work under Firefox. What things are allowed and what aren't - that type of thing. TIA - Jeff.
10
1747
by: angelina18 | last post by:
Hi. This is my first post here and my first css site. I read alot of the previous posts and therefore I did validate my code, but I couldn't find the answers to my 2 problems which are: 1. When I position the nav bar absolute, the top and bottom borders disappear in IE 5 & 6. So, I changed the position to relative and the borders reappear in IE, but the position needs to be moved up like 1/4 inch. 2. The text in the footer is centered in...
8
2389
by: jerrydigital | last post by:
Hi, does anyone know of a good route to take to allow users with Firefox and other browsers other than Internet Explore to use my website? My website is working great on Internet Explorer but I just found out that in Firefox users can't enter any information in the form fields plus there are random font issues throughout the pages. Can anyone direct me to a tutorial or idea how to be universal since most people I know are starting to use...
0
9724
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10644
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10379
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10394
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9201
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7665
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6882
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5690
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
3863
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.